vue静态资源cdn部署,vue.js cdn
在日常的开发过程中，为了减少最终包的体积，我们会使用cdn引入一些比较大的库来解决问题。以下文章主要介绍了vue项目中CDN介绍的配置和易错点，有需要的朋友可以参考一下。
目录
前言1。vue.config.js 2中的配置。public/index.html文件3中的配置。易错点路由器未定义摘要
前言
CDN(内容分发网络)是指请求资源的方式，即通过脚本头请求相应脚本资源的一种方式。在项目中进行配置后，不需要通过npm包管理工具下载已配置的包。
目的：将引用的外部js和css文件分开，而不是编译成vendor.js，以资源的形式引用，这样浏览器就可以使用多线程异步加载vendor.js和外部js，从而达到加速首页显示的效果。
1. 在vue.config.js进行配置
我做过的cdn参考有vue，vuex，vue-router，axios，element-ui，echarts。(cdn请求元素-ui和echarts很慢)
//生产环境标志
const IS _ PRODUCTION=process . ENV . node _ ENV=== PRODUCTION
//配置引用cdn的js和css地址
const cdn={
css: [
https://UNP kg . 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://un pkg . com/element-ui @ 2 . 13 . 2/lib/index . js ，
https://cdn . bootcdn . net/Ajax/libs/echarts/5 . 0 . 1/echarts . min . js
]
}
//配置打包时，使用CDN node(join externals的外部扩展)，忽略打包的第三方库。
//左边放package.json中扩展的名称，右边放项目依赖的名称(用于项目初始化的名称)。
const externals={
//属性名vue的意思是，如果遇到引入了 vue 的 vue 的import xxx，不是在node_modules中查找，而是查找全局变量Vue(其他的有VueRouter，Vuex，axios，ELEMENT和echarts。请注意，全局变量是某个值，不能修改为其他值。更改为其他大小写或其他值将会出错。)
Vue:“Vue”，
“vue路由器”:“vue路由器”，
Vuex:“Vuex”，
axios:“axios”，
元素-ui :元素，
“电子海图”:“电子海图”
}
chainWebpack(配置){
if (IS_PRODUCTION) {
config.plugin(html )。tap(args={
参数[0]。cdn=cdn
返回参数
})
//将其视为外部库，而不将其打包
config.externals(外部)
}
}
2.在public/index.html文件配置
使用webpack自带的插件html插件进行配置，在index.html添加判断是否使用CDN。htmlWebpackPlugin.options使用vue.config中config.plugin的插件属性( html )
！-使用CDN的CSS文件-
% for(变量i in
htmlwebpackplugin . options . cdnhtmlwebpackplugin . options . cdn . CSS){ %
link href= %=htmlwebpackplugin . options . cdn . CSS[I]% rel= external no follow rel= external no follow rel= preload as= style /
link href= %=htmlwebpackplugin . options . cdn . CSS[I]% rel= external no follow rel= external no follow rel= style sheet /
% } %
！-JS文件由CDN加速，配置在vue.config.js下-
% for(变量i in
htmlwebpackplugin . options . cdnhtmlwebpackplugin . options . cdn . js){ %
script src= %=htmlwebpackplugin . options . cdn . js[I]% /script
% } %
3.易出错点 Router is not defined
解决方案：将路由器更改为“Vue路由器”不支持类型错误：非法构造函数
解决方案：在外部修改“element-ui”的值。
const externals={
元素-ui :元素，
}
总结
到目前为止，这篇关于在vue项目中使用CDN的配置和易错点的文章已经介绍到这里了。关于在vue项目中引入CDN的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。