cdn引入VueRouter后报错VueRouter is not defined && element-ui无法优化

Question

帮舍友做毕设碰到的问题，在优化的时候将vue-router通过cdn方式引入会报错：

external "VueRouter"?69f4:1 Uncaught ReferenceError: VueRouter is not defined
    at eval (external "VueRouter"?69f4:1)
    at Object.vue-router (app.js:2468)
    at __webpack_require__ (app.js:785)
    at fn (app.js:151)
    at eval (router.js?41cb:1)
    at Module../src/router.js (app.js:2313)
    at __webpack_require__ (app.js:785)
    at fn (app.js:151)
    at eval (main.js:17)
    at Module../src/main.js (app.js:1845)

诸位大哥测试之前把vue.config.js替换成这个

// 代码压缩
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

// gzip压缩
const CompressionWebpackPlugin = require("compression-webpack-plugin");

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== "development";

// 本地环境是否需要使用cdn
const devNeedCdn = true;

// cdn链接
const cdn = {
  // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
  externals: {
    "vue": "Vue",
    "vue-router": "VueRouter",
    "vuex": "Vuex",
    "axios": "axios",
    "element-ui": "ELEMENT"
  },
  // cdn的css链接
  css: ["https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css"],
  // cdn的js链接
  js: [
    "https://cdn.bootcss.com/vue/2.6.11/vue.min.js",
    "https://cdn.bootcss.com/vue-router/3.1.5/vue-router.min.js",
    "https://cdn.staticfile.org/vuex/3.1.2/vuex.min.js",
    "https://cdn.bootcss.com/axios/0.19.2/axios.min.js",
    "https://unpkg.com/element-ui@2.13.0/lib/index.js"
  ]
};

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

module.exports = {
  productionSourceMap: false, // 调整内部的webpack配置. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: config => {
    // ============压缩图片 start============
    config.module
      .rule("images")
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({ bypassOnDebug: true })
      .end();
    // ============压缩图片 end============
    // ============注入cdn start============
    config.plugin("html").tap(args => {
      // 生产环境或本地需要cdn时，才注入cdn
      if (isProduction || devNeedCdn) args[0].cdn = cdn;
      return args;
    });
    // ============注入cdn start============
  },
  // configureWebpack: config => {
  //   if (isProduction || devNeedCdn) {
  //     config.externals = cdn.externals;
  //   }
  //   if (isProduction) {
  //     // 代码压缩
  //     config.plugins.push(
  //       new UglifyJsPlugin({
  //         uglifyOptions: {
  //           //生产环境自动删除console
  //           compress: {
  //             warnings: false, // 若打包错误，则注释这行
  //             drop_debugger: true,
  //             drop_console: true,
  //             pure_funcs: ["console.log"]
  //           }
  //         },
  //         sourceMap: false,
  //         parallel: true
  //       })
  //     );

  //     // gzip压缩
  //     const productionGzipExtensions = ["html", "js", "css"];
  //     config.plugins.push(
  //       new CompressionWebpackPlugin({
  //         filename: "[path].gz[query]",
  //         algorithm: "gzip",
  //         test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
  //         threshold: 10240, // 只有大小大于该值的资源会被处理 10240
  //         minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
  //         deleteOriginalAssets: false // 删除原文件
  //       })
  //     );
  //   } else {
  //     // 为开发环境修改配置...
  //     config.plugins = [new BundleAnalyzerPlugin()];
  //   }
  
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()],
    externals: {
      "vue": "Vue",
      "vue-router": "VueRouter",
      "vuex": "Vuex",
      "axios": "axios",
      "element-ui": "ElementUI"
    }
  },
  /** 区分打包环境与开发环境
   * process.env.NODE_ENV==='production'  (打包环境)
   * process.env.NODE_ENV==='development' (开发环境)
   * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
   */
  // 项目部署的基础路径
  // 我们默认假设你的应用将会部署在域名的根部,
  // 例如 https://www.my-app.com/
  // 如果你的应用部署在一个子路径下，那么你需要在这里
  // 指定子路径。比如将你的应用部署在
  // https://www.foobar.com/my-app/
  // 那么将这个值改为 '/my-app/'

  outputDir: "dist", // where to put static assets (js/css/img/font/...) // 是否在保存时使用‘eslint-loader’进行检查 // 有效值: true | false | 'error' // 当设置为‘error’时，检查出的错误会触发编译失败
  lintOnSave: true, // 使用带有浏览器内编译器的完整构建版本 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  runtimeCompiler: false, // babel-loader默认会跳过`node_modules`依赖. // 通过这个选项可以显示转译一个依赖
  transpileDependencies: [
    /* string or regex */
  ], // 是否为生产环境构建生成sourceMap?
  css: {
    // 将组件内部的css提取到一个单独的css文件（只用在生产环境）
    // 也可以是传递给 extract-text-webpack-plugin 的选项对象
    extract: true, // 允许生成 CSS source maps?
    sourceMap: false, // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } }
    loaderOptions: {} // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue files.
  }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores

  parallel: require("os").cpus().length > 1, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

  pwa: {}, // configure webpack-dev-server behavior
  devServer: {
    proxy: {
      "/proxy": {
        target: "http://39.108.96.43:8080/",
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/proxy": ""
        }
      }
    }
  }, // 第三方插件配置

  pluginOptions: {
    // ...
  }
};

除此之外通过 BundleAnalyzerPlugin 查看状况时不知为何 element-ui 并未被清掉，呈现这样

y1s1确实迷惑。

项目地址 https://github.com/Burning-Shadow/jwgk_background.git

谢谢诸位大哥！！！

Answer 1

好兄弟们问题解决了！最终原因是我在 main.js 里还保留了 element-ui 的引用，所以打包的时候一定一定要记住删除啊！！！！！

最后感谢衡哥@wy衡出手相救

Answer 2

https://cdn.bootcss.com/vue-r... 这个链接已经 404 了，换个 CDN 吧

Answer 3

element-ui 那个，建议检查一下 package 里是否重复了，有的话先删掉