Vue-cli5.0搭建项目通过CDN引入Element

2022-03-12 1,631 阅读1分钟

使用Vue-cli5.0搭建的vue项目，引入CDN时vue.config.js的配置block了，仅记录一次成功的配置，深入了解后会再更新

版本信息

@vue/cli@5.0.1
vue@2.6.14
element-ui@2.15.7

引入步骤

修改public/index.html文件

<head>
  ...
  <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.7/lib/theme-chalk/index.css">
  ...
</head>

<body>
  ...
  <div id="app"></div>
  <!-- 先引入vue再引入element-ui -->
  <script src="https://unpkg.zhimg.com/vue@2.6.14/dist/vue.min.js"></script>
  <script src="https://unpkg.zhimg.com/element-ui@2.15.7/lib/index.js"></script>
</body>

</html>

修改vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
/**
 * 配置文件使用了defineConfig这个函数实现配置
 * 通过源码可以查找到webpack配置的对象
 */
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    externals: {
      vue: 'Vue', // import vue from Vue
      'element-ui': 'ELEMENT', // import element-ui from ELEMENT，依赖变量名为vue的对象
    },
  },
});

注意

删除element-ui按需引入的配置，避免冲突
注意Vue-cli的版本以及vue.config.js文件是否使用了defineConfig函数
element-ui的版本按需配置，由于响应不稳定，CDN地址使用了国内的镜像unpkg.zhimg.com