vue静态资源cdn部署,vue cdn引入js文件
在生产环境中，将项目所依赖的一些第三方包改为通过cdn进行外部加载，而不是打包给vender，这对提高应用的加载和响应速度具有重要意义。以下文章主要介绍了vue项目中如何通过cdn引入资源并进行配置的相关信息，有需要的可以参考一下。
目录
概念函数参考资源及配置1、简介2、配置3、删除main.js文件中的原参考摘要。
概念
Cdn(内容分发网络)是通过互联网相互连接的计算机网络系统。当用户从cdn链接请求资源时，cdn将使用离用户最近的服务器将资源返回给用户。
作用
有了cdn，用户可以直接请求cdn服务器，而不需要通过项目中的npm下载其他资源(比如第三方库)，服务器返回后就可以使用，这样在打包的时候减少了包的大小，项目的首屏加载也可以更快。
引用资源及配置
以下cdn参考和配置(vue、vuex、vue-router、axios、elementUI)不用多说，都是针对vue项目中的常用资源。
1、引入
您可以在项目中的index.html文件头/标签的标题/标签下添加以下代码(如果您需要最新版本，可以在各种官方网站上复制)
头
.
标题/标题
！-添加以下代码-
script src= https://cdn . bootcss . com/vue/2 . 5 . 2/vue . min . js rel= style sheet type= text/JavaScript /script
link rel= style sheet href= https://cdn . bootcss . com/element-ui/2 . 4 . 0/theme-chalk/index . CSS
script src= https://cdn . bootcss . com/element-ui/2 . 12 . 0/index . js rel= style sheet type= text/JavaScript /script
script src= https://cdn . bootcss . com/vuex/3 . 0 . 1/vuex . min . js rel= style sheet type= text/JavaScript /script
script src= https://cdn . bootcss . com/axios/0 . 17 . 1/axios . min . js rel= style sheet type= text/JavaScript /script
script src= https://cdn . bootcss . com/vue-router/3 . 0 . 1/vue-router . min . js rel= style sheet type= text/JavaScript /script
头
2、配置
在webpack.base.conf.js文件中添加以下配置
外部：{
vue: Vue ，
“vue路由器”:“vue路由器”，
元素-ui :元素，
vuex: Vuex ，
axios: axios ，
},
如果是vue-cli3以上版本，如果没有webpack.base.conf.js文件，在vue.config.js文件中配置：
模块.导出={
.
configureWebpack: {
外部：{
//CDN的元素依赖于全局变量Vue，所以Vue也需要由CDN引入。
vue: Vue ，
//属性名element-ui，意思是遇到从‘element-ui’导入‘element-ui’比如导入xxx时，
//不在node_modules中查找，而是查找全局变量元素
元素-ui :元素，
axios: axios ，
vuex: Vuex ，
“vue路由器”:“vue路由器”，
}
},
}
3、在main.js文件中去除原来的引用
main.js
//从“vue”导入Vue
//从“”导入路由器。/路由器
//导入“element-ui/lib/theme-chalk/index . CSS”；
//从“element-ui”导入ElementUI
//从“vuex”导入Vuex
//从“axios”导入axios
//Vue.use(Vuex)
//vue . use(element ui)；
这样在vue项目中通过cdn引入一些常用资源。
总结
关于如何在vue项目中通过cdn引入资源并进行配置的文章到此为止。有关vuecdn中资源的介绍和配置的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。