前言~~~
搭建vue项目时，如果使用了多插件的情况在打包的时候会全部加载进来，打成的包会很大，导致在加载程序的时候速度上会有一些影响，这时候就是用到了cdn这个东东
1、查找cdn的时候我用的是（360的奇舞团CDN）、（今日头条CDN）
360奇舞团地址：静态资源托管库
今日头条地址：字节跳动静态资源公共库
2、这里将以vue-echart举例，我们一般引用echart的时候都是直接引用，这时就像上所述在打包时出现资源较大的情况，所以使用了cdn，vue对于echart之类的插件都有很好的集成，这里可以使用（vue-资源）去cdn中进行查找
3、配置我们需要的cdn 引入js、css等这里 process.env.NODE_ENV === 'production' 对环境进行一个校验，默认是生产环境使用了cdn
注意：
1）、这里有几个注意的地方 vueEcharts 名字不是随意取的，在自己的cdn中查找一下如下：
2）、config里面各项配置说明见文章：config说明
上面描述完了，接下来就是加载cdn的过程 说一下个人的理解，系统启动时候会自动加载config.js，在预编译的时候把组件给加载进来，进行打包到html模板中，在public的index中配置对应的cdn去加载相当于一个生成文件的入口，打包的时候会将css和js放到这里面，之后在输出到目录里面
vue.config.js中配置的
module.exports = { devServer: { port: 12000, proxy: { '/manage': { target: 'http://localhost:24030', changeOrigin: true, ws: true, pathRewrite: { '^/manage': '/', }, }, }, }, chainWebpack: (config) => { if (process.env.NODE_ENV === 'production') { var externals = { vue: 'Vue', vuex: 'Vuex', echarts: 'echarts', 'element-ui': 'ELEMENT', 'vue-router': 'VueRouter', 'vue-echarts': 'VueECharts', } config.externals(externals) const cdn75 = { // 360的奇舞团CDN css: [ // element-ui.css 'https://lib.baomitu.com/element-ui/2.14.1/theme-chalk/index.min.css', ], js: [ // vue-echarts.js 'https://lib.baomitu.com/vue-echarts/6.0.2/index.umd.min.js', ], } const cdnToutiao = { // 今日头条CDN css: [ // element-ui.css 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/element-ui/2.14.1/theme-chalk/index.min.css', ], js: [ // vue-echarts.js 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue-echarts/6.0.2/index.umd.min.js', ], } const jsDelivr = { // 今日头条CDN css: [ // element-ui.css 'https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/theme-chalk/index.css', ], js: [ // vue-echarts.js 'https://cdn.jsdelivr.net/npm/vue-echarts@6.0.2/dist/index.umd.min.js', ], } config.plugin('html').tap((args) => { args[0].cdn75 = cdn75 args[0].cdnToutiao = cdnToutiao args[0].jsDelivr = jsDelivr return args }) } }, } .public/index.html（重点不是全部复制哈，这里是引入了对应的样式和js，有校验的前提）
<!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"> <meta http-equiv="program" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <title><%= htmlWebpackPlugin.options.title %></title> <!-- 引入样式 --> <% if (process.env.NODE_ENV === 'production') { %> <% for(var css of htmlWebpackPlugin.options.cdn75.css) { %> <link rel="stylesheet" href="<%=css%>" as="style"> <% } %> <% } %> </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 --> <% if (process.env.NODE_ENV === 'production') { %> <% for(var js of htmlWebpackPlugin.options.cdn75.js) { %> <script src="<%=js%>"></script> <% } %> <% } %> <div id="app"> <div>正在加载系统资源，请耐心等待</div> </div> <!-- built files will be auto injected --> </body> </html> 原文链接：https://blog.csdn.net/MoRan_Lei/article/details/123825080?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934461816780366579231%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934461816780366579231&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-16-123825080-null-null.nonecase&utm_term=%E6%90%AD%E5%BB%BAcdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/6216
