前言
cdn（内容分发网络）指请求资源的方式，即通过script头去请求对应的脚本资源的一种方式，项目里配置之后不需要通过npm包管理工具去下载配置的包。
目的：将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首页展示效果。
1. 在vue.config.js进行配置
本人对vue、vuex、vue-router、axios、element-ui、echarts进行了cdn引用。（请求element-ui、echarts的cdn较慢）
const IS_PRODUCTION = process.env.NODE_ENV === 'production' const cdn = { css: [ 'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css' ], js: [ 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js', 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.2/vue-router.min.js', 'https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js', 'https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js', 'https://unpkg.com/element-ui@2.13.2/lib/index.js', 'https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js' ] } const externals = { vue: 'Vue', 'vue-router': 'VueRouter', vuex: 'Vuex', axios: 'axios', 'element-ui': 'ELEMENT', 'echarts': 'echarts' } chainWebpack(config) { if (IS_PRODUCTION) { config.plugin('html').tap(args => { args[0].cdn = cdn return args }) config.externals(externals) } } 2.在public/index.html文件配置
使用 webpack中自带的插件 html插件进行配置，在 index.html 中增加判断，是否使用 CDN， htmlWebpackPlugin.options 使用的是vue.config中的config.plugin('html')的插件属性。
<!-- 使用CDN的CSS文件 --> <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" /> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" /> <% } %> <!-- 使用CDN加速的JS文件，配置在vue.config.js下 --> <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %> <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script> <% } %> 3.易出错点
- Router is not defined
解决方案： 将Router 改为 ‘VueRouter’ - Uncaught TypeError: Illegal constructor
解决方案：修改externals 中‘'element-ui’的value
const externals = { 'element-ui': 'ELEMENT', } 原文链接：https://blog.csdn.net/qq_38951259/article/details/124442649?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918321816782184659334%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918321816782184659334&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-25-124442649-null-null.nonecase&utm_term=cdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/129
