vue cli3 cdn 使用 element。Cannot read property 'prototype' of undefined
vue cli3创建时不带vue.config.js,需要在根目录创建一个。具体可以查看:
https://cli.vuejs.org/zh/guide/webpack.html。
简单的配置方式:
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}
第一步:需要在configureWebpack中配置排除打包。
方式一:
module.exports = {
configureWebpack: {
externals: {
'element-ui': 'ElementUI' // 配置使用CDN
}
}
}
方式二:
module.exports = {
configureWebpack: (config) => {
config.externals={
'element-ui': 'ElementUI' // 配置使用CDN
}
}
}
第二步:需要在pubilc文件夹index.html中配置cdn。
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
第三步:把之前element引用删除。
// import ElementUI from 'element-ui';
// Vue.use(ElementUI);
vue cli3 使用 cdn,到这其实就已经配置完了。但是打包完成运行时报异常:
index.min.js:1 Uncaught TypeError: Cannot read property 'prototype' of undefined
经过查看别人解决方案需要选择vue版本:创建Vue项目的时候选择 Vue2.x 版本 其他操作不变。但我的项目已经开发的差不多了,再换版本太麻烦了。既然vue版本不对,那我连vue也cdn算了。然后配置上vue cdn,打包运行正常了。
vue.config.js中添加vue排除。
module.exports = {
configureWebpack: (config) => {
config.externals={
vue:'Vue',
'element-ui': 'ElementUI' // 配置使用CDN
}
}
}
index.html中添加cdn
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
原文地址:https://blog.csdn.net/u013424785/article/details/113754517
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。