使用@vue/cli@next构建时如何排除element-plus包并替换为CDN引入

错误成因与解决方案 #

1. Element Plus CDN资源格式错误 #

你引入的https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.8/lib/index.js是CommonJS格式产物，仅适配Node.js环境，浏览器环境不存在exports等Node内置变量，因此触发exports is not defined报错。
同时因为该脚本加载执行失败，没有成功挂载全局ElementPlus变量，后续代码调用时就会触发ElementPlus is not defined报错。
修复方式：将index.html中的Element Plus脚本地址替换为浏览器适配的全局格式产物：

<script src="https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.8/dist/index.full.min.js"></script>

2. vue.config.js配置语法错误 #

你当前的externals配置写法不符合vue-cli的配置规范，webpack无法识别到你声明的外部依赖规则。
修复方式：将vue.config.js调整为如下写法：

module.exports = {
  configureWebpack: {
    externals: {
      vue: "Vue",
      "vue-router": "VueRouter",
      vuex: "Vuex",
      "element-plus": "ElementPlus",
    }
  }
}

其他说明 #

你提供的tsconfig.json配置没有问题，和本次报错无关，无需调整。

内容的提问来源于stack exchange，提问作者linrongbin