//vue.config.js let cdn = { css: [], js: [] }; // 通过环境变量 来区分是否使用cdn const isDev = process.env.NODE_ENV === 'development'; // 判断是否是开发环境 let externals = {}; if (!isDev) { // 如果是非开发环境 就排除打包 否则不排除 externals = { // key(包名) / value(这个值 是 需要在CDN中获取js, 相当于 获取的js中 的该包的全局的对象的名字) 'vue': 'Vue',// 后面的名字不能随便起 应该是 js中的全局对象名 'vue-router': 'VueRouter', moment: 'moment', 'ant-design-vue': 'antd', 'axios': 'axios' } cdn = { css: [ 'https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.min.css', // 提前引入ant design vue样式 ], // 放置css文件目录 js: [ 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', // vuejs 'https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js', 'https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js', // 必须先引入moment，否则报错“TypeError: Cannot read property 'default' of undefined” 'https://cdn.jsdelivr.net/npm/moment@2.29.1/locale/zh-cn.js', // 需同步引入语言包，否则日期选择控件等将默认显示为英文 'https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.min.js', // ant design vue 'https://cdn.jsdelivr.net/npm/axios@0.21.0/dist/axios.min.js' ]// 放置js文件目录 } } module.exports = { configureWebpack: { // 排除打包的某些选项 externals: externals }, chainWebpack: config => { // 注入cdn的变量到index.html中 config.plugin('html').tap((arg) => { arg[0].cdn = cdn return arg }) }, }//public/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> <!-- 引入css-cdn的文件 --> <% for(var css of htmlWebpackPlugin.options.cdn.css) { %> <link rel="stylesheet" href="<%=css%>"> <% } %> </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> <!-- 放置js-cdn文件 --> <% for(var js of htmlWebpackPlugin.options.cdn.js) { %> <script src="<%=js%>" ></script> <% } %> <div id="app"></div> </body> <script> if (!!window.ActiveXObject || "ActiveXObject" in window) { document.body.innerHTML = '<div class="back-main"><div class="login--main"><div class="login-error"><div class="login-error-title">浏览器不支持</div><div class="login-error-content"><div class="login-error-icon"><i class="icon-uniEA30"></i></div><p>IE 浏览器不支持 </p ><p>请使用最新Chrome, Firefox, Safari浏览器. </p ></div></div></div></div>' } </script> </html> tips：css文件放在head中，js文件最好放在body内部的最上面，否则很可能出现某某对象未定义的问题
使用cdn的包，会被从主包中分离出去，有效的减小主包的体积。
最后解答一个问题：
在做cdn时百度了很多，经常看到说要注释import引入的包(cdn)，其实是不用的。一旦你注释掉，就意味着不能切换npm环境和cdn环境。
原文链接：https://blog.csdn.net/THcoding_Cat/article/details/121243917?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918418816782395376867%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918418816782395376867&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-9-121243917-null-null.nonecase&utm_term=cdn%E5%8A%A0%E9%80%9F
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/399
