vue项目生产环境打包项目时引入外部CDN优化项目

第一步：

vue.config.js中

 // 生产环境加载外部CDN资源
      config.set("externals", {
        vue: "Vue",
      });

module.exports = {
  publicPath: "./",
  chainWebpack: (config) => {
    // 判断是生产环境打包main-prod.js
    config.when(process.env.NODE_ENV === "production", (config) => {
      config.entry("app").clear().add("@/main-prod.js");
      // 生产环境加载外部CDN资源
      config.set("externals", {
        vue: "Vue",
      });
    });
    // 判断是开发环境打包main-dev.js
    config.when(process.env.NODE_ENV === "development", (config) => {
      config.entry("app").clear().add("@/main-dev.js");
    });
  },
};

第二步：

在main-prod.js文件中引入的样式注释

第三步：

在public/index.html中直接引入要使用的CND的链接

<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>