vuecli externals
externals干嘛用的
webpack有写，自己理解下：就是改变包引用路径，开发和生产环境统统改变有效。 比如 import Vue from 'vue' 默认来说 引用‘vue’默认从node_modules里面找vue,但是vue.config.js配置了externals，就不去引用node_modules，转而去找public/index.html里面的cdn有关vue的链接。就干了这么一回事。
所以最简单的配置就是：不区分开发环境和使用变量，直接用就是下面用法
configureWebpack: (config) => { /** * externals:externals配置的对象统统走cdn.（不管生产还是本地开发） * 解释一下：import A from 'a' 去使用小a的时候不走node_modules了，统统走public/index.html里面配置的cdn链接。前提是要往html里面配置cdn各种链接.到这里就结束了 externals用法就完了 */ config.externals = { vue: "Vue", //解释一下：import XX from 'vue' 这里的'vue' 就是externals的key vue. "Vue"是cdn vue链接全局挂载window上的Vue "vue-router": "VueRouter", moment: "moment", vant: "vant", axios: "axios", vconsole: "VConsole", lodash: "_", }; }, 复制代码//public/index.html <script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"> </script> ... 复制代码
真实项目使用externals
区分本地和生产环境，本地走node_moduels，线上走cnd，因为cdn都是min.js/min.css。本地开发不好调用，所以本地用node_moduels
线上cdn和本地node_moduels所使用的包版本号要一致。具体看package.json里面包版本号
public/index.html里面写入的那些cdn的js和css链接统统放vue.config.js里面，统一js管理
所以综合就是下面代码块
/** * 生产环境上cdn,本地还是走node_modules,但是2者版本号保持一致,版本号看package.json * https://unpkg.com/ unpkg如何找cdn链接 * cdn https://unpkg.com/jquery/ 留下最后一个/ * -> https://unpkg.com/browse/jquery@3.6.1/dist/jquery.slim.min.js 去掉browse/ * -> https://unpkg.com/https://unpkg.com/jquery@3.6.1/dist/jquery.slim.min.js */ const CDN = { css: ["https://unpkg.com/vant@2.12.53/lib/index.css"], js: [ "https://unpkg.com/vue@2.6.11/dist/vue.min.js", "https://unpkg.com/vue-router@3.2.0/dist/vue-router.min.js", "https://unpkg.com/vant@2.12.53/lib/vant.min.js", "https://unpkg.com/axios@1.1.3/dist/axios.min.js", "https://unpkg.com/vconsole@3.14.7/dist/vconsole.min.js", "https://unpkg.com/moment@2.29.4/min/moment.min.js", "https://unpkg.com/lodash@4.17.21/lodash.min.js", ], }; module.exports = { publicPath: "./", productionSourceMap: false, devServer: { open: true, }, configureWebpack: (config) => { if (process.env.NODE_ENV === "development") { } else { //生产环境 /** * externals:externals配置的对象统统走cdn.（不管生产还是本地开发） * 解释一下：import A from 'a' 去使用小a的时候不走node_modules了，统统走public/index.html里面配置的cdn链接。前提是要往html里面配置cdn各种链接.到这里就结束了 externals用法就完了 * 但是有的时候本地开发走node_modules，生产环境走cdn，于是需要区分环境 */ config.externals = { vue: "Vue", //解释一下：import XX from 'vue' 这里的'vue' 就是externals的key vue. "Vue"是cdn vue链接全局挂载window上的Vue "vue-router": "VueRouter", moment: "moment", vant: "vant", axios: "axios", vconsole: "VConsole", lodash: "_", }; } }, //修改已有插件用chainWebpack vuecli官网明确说过。 //这里就解释了为啥不在configureWebpack配置define，其实也可以配，不过很麻烦。 chainWebpack: (config) => { config.plugin("define").tap((args) => { //这样是搞不出来的 args[0]['process_env'].isProd=JSON.stringify(process.env.NODE_ENV !== "development"); args[0].isProd = JSON.stringify(process.env.NODE_ENV !== "development"); //都需要JSON.stringify args[0].CDN = JSON.stringify(CDN); return args; }); }, }; 复制代码<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> <!-- 生产环境生效 配合externals一起用 直接就是isProd CDN使用 而不是htmlWebpackPlugin.options.isProd htmlWebpackPlugin.options.CDN使用.⚠️ --> <% if(isProd){ %> <% for(var i in CDN.css) {%> <link rel="stylesheet" href="<%= CDN.css[i]%>"> <% } %> <% } %> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong > </noscript> <div id="app"></div> <!-- built files will be auto injected --> <!-- 生产环境生效 配合externals一起用--> <% if(isProd){ %> <% for(var i in CDN.js) {%> <script src="<%= CDN.js[i]%>"> </script> <% } %> <% } %> </body> </html> 复制代码最后码字不易，希望看官点赞????
作者：章画画
链接：https://juejin.cn/post/7169964454493290509