2021-02-08

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>