基于Webpack4搭建Vue+ElementUI项目，通过CDN引入依赖

看起来你已经找对了方向——通过externals配置让Webpack跳过Vue和ElementUI的打包，这是CDN引入依赖的核心步骤。我帮你补全完整的配置、HTML代码，同时梳理几个容易踩坑的细节：

1. 完善Webpack配置（修复vue-loader必填插件） #

你的externals配置是正确的，但Webpack4中使用vue-loader必须配合VueLoaderPlugin，否则会编译报错。补充后的完整配置如下：

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: "development",
  entry: ["./app.js"],
  externals: {
    vue: "Vue", // 对应CDN全局变量Vue
    "element-ui": "ElementUI" // 对应CDN全局变量ElementUI
  },
  module: {
    rules: [
      { test: /.vue$/, use: "vue-loader" },
      { test: /.css$/, use: ["style-loader", "css-loader"] },
      { test: /.ttf$|.woff$/, use: [{ loader: "url-loader", options: { limit: 10000 } }] }
    ]
  },
  plugins: [
    new VueLoaderPlugin() // vue-loader强制要求的插件，必须添加
  ]
};

2. 补全HTML文件（正确引入CDN资源） #

要注意资源引入顺序：先引入Vue，再引入ElementUI（ElementUI依赖Vue），同时别忘了引入ElementUI的样式CDN：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue + ElementUI CDN Demo</title>
  <!-- ElementUI样式CDN -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- Vue CDN（建议指定稳定版本，比如2.6.14，和ElementUI 2.x兼容） -->
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
  <!-- ElementUI CDN -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入Webpack打包后的入口JS -->
  <script src="./dist/main.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

3. 入口文件app.js示例（正常使用依赖） #

此时你可以像常规项目一样导入Vue和ElementUI，Webpack会自动映射到CDN的全局变量，不会把它们打包进bundle：

import Vue from 'vue';
import ElementUI from 'element-ui';
import App from './App.vue';

// 注册ElementUI组件
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

几个关键注意点 #

• 版本兼容性：ElementUI 2.x仅支持Vue 2.x，不要混用Vue 3和ElementUI 2；如果用Vue 3，需要使用Element Plus。
• Vue构建版本：如果你的组件中使用了template选项（而非render函数），必须引入Vue的完整版（如vue.js），不能用vue.runtime.js，否则会报错。
• 生产环境优化：上线时建议切换为CDN的压缩版本（.min.js/.min.css），减少资源体积。
• 依赖安装：确保已安装所有必要的loader依赖：npm install vue-loader vue-template-compiler style-loader css-loader url-loader file-loader --save-dev

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