【vue】解决 vue项目打包后线上报错无法请求cdn.jsdelivr.net相关资源问题

使用cdn原因
由于Vue 项目打包后的 vendor.js 过大，将导致打包速度慢，首屏加载慢 ，其原因是第三方库比如（vue、vue-router、vuex、axios等）都会被打包到 vendor.js 文件里面，而浏览器是在加载这些文件之后，才开始显示首屏的。所以把第三方库比如（vue、vue-router、vuex、axios等）通过cdn的方式引入到项目中，这样浏览器可以开启多个线程，将vendor.js、外部js、css等加载下来(bootcdn等资源，或其他服务器资源)，使得vendor.js文件减少，从而提升首屏加载速度。

使用位置 vue.config.js

// eslint-disable-next-line no-unused-vars
const isProd = process.env.NODE_ENV === 'production'

// eslint-disable-next-line no-unused-vars
const assetsCDN = {
  // webpack build externals
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    'viser-vue': 'ViserVue'
  },
  css: [],
  // https://unpkg.com/browse/[email protected]/
  js: [
    // 将cdn.jsdelivr.net替换为 fastly.jsdelivr.net
    // 国外静态资源库 cdn.jsdelivr.net、fastly.jsdelivr.net、gcore.jsdelivr.net
    // 国内静态资源库 cdn.staticfile.org(掘金)、cdn.bytedance.com(字节跳动)、cdn.baomitu.com(360)
    '//fastly.jsdelivr.net/npm/[email protected]/dist/vue.min.js',
    '//fastly.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js',
    '//fastly.jsdelivr.net/npm/[email protected]/dist/vuex.min.js',
    '//fastly.jsdelivr.net/npm/[email protected]/dist/axios.min.js',
    '//unpkg.com/viser-vue/umd/viser-vue.min.js'
  ]
}

module.exports = {
	 chainWebpack: config => {
		// en_US: If prod is on assets require on cdn
	    // zh_CN: 如果是 prod 模式，则引入 CDN 依赖文件，有需要减少包大小请自行解除依赖
	    if (isProd) {
	      config.plugin('html').tap(args => {
	        args[0].cdn = assetsCDN
	        return args
	      })
	    }
	}
}

解决办法
一、调整引入资源地址
1、cdn.jsdelivr.net 未受污染的子域：
2、fastly.jsdelivr.net，由 Fastly 提供
3、gcore.jsdelivr.net，由 G-Core 提供
4、testingcf.jsdelivr.net，由 CloudFlare 提供
二、国内资源地址
1、cdn.staticfile.org，七牛云和掘金的静态资源库
2、cdn.bytedance.com，字节跳动静态资源公共库
3、cdn.baomitu.com，360 前端静态资源库
第一种方法只需要替换链接地址中的cdn，第二种需要在国内网站上搜索 JS 库的名字，然后复制搜索结果给出的链接，再替换掉对应的 jsDelivr 链接。