vue項(xiàng)目使用CDN引入的配置與易出錯點(diǎn)
前言
CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))指請求資源的方式,即通過script頭去請求對應(yīng)的腳本資源的一種方式,項(xiàng)目里配置之后不需要通過npm包管理工具去下載配置的包。
目的:將引用的外部js、css文件剝離開來,不編譯到vendor.js中,而是用資源的形式引用,這樣瀏覽器可以使用多個線程異步將vendor.js、外部的js等加載下來,達(dá)到加速首頁展示效果。
1. 在vue.config.js進(jìn)行配置
本人對vue、vuex、vue-router、axios、element-ui、echarts進(jìn)行了cdn引用。(請求element-ui、echarts的cdn較慢)
//生產(chǎn)環(huán)境標(biāo)記 const IS_PRODUCTION = process.env.NODE_ENV === 'production' //配置引用cdn的js、css地址 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' ] } //配置打包時(shí)使用CDN節(jié)點(diǎn)(加入externals外部擴(kuò)展), 忽略打包的第三方庫 //左面放package.json中的擴(kuò)展的名稱,右面放項(xiàng)目依賴的名稱(項(xiàng)目初始化要用的名稱) const externals = { // 屬性名稱 vue, 表示遇到 import xxx from 'vue' 這類引入 'vue'的,不去 node_modules 中找,而是去找全局變量 Vue(其他的為VueRouter、Vuex、axios、ELEMENT、echarts,注意全局變量是一個確定的值,不能修改為其他值,修改為其他大小寫或者其他值會報(bào)錯,若有異議可留言) 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 }) //視為一個外部庫,而不將它打包進(jìn)來 config.externals(externals) } }
2.在public/index.html文件配置
使用 webpack中自帶的插件 html插件進(jìn)行配置,在 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="external nofollow" rel="external nofollow" rel="preload" as="style" /> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" 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.易出錯點(diǎn) Router is not defined
解決方案: 將Router 改為 ‘VueRouter’Uncaught TypeError: Illegal constructor
解決方案:修改externals 中‘'element-ui’的value
const externals = { 'element-ui': 'ELEMENT', }
總結(jié)
到此這篇關(guān)于vue項(xiàng)目使用CDN引入的配置與易出錯點(diǎn)的文章就介紹到這了,更多相關(guān)vue項(xiàng)目CDN引入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue在頁面和方法中如何通過遍歷對象獲取對象的鍵(key)和值(value)
這篇文章主要介紹了vue在頁面和方法中如何通過遍歷對象獲取對象的鍵(key)和值(value)問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05配置vite.confgi.ts無法使用require問題以及解決
這篇文章主要介紹了配置vite.confgi.ts無法使用require問題以及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05Vue-cli項(xiàng)目部署到Nginx服務(wù)器的方法
這篇文章主要介紹了Vue-cli項(xiàng)目部署到Nginx服務(wù)器的方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動運(yùn)行
這篇文章主要介紹了詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動運(yùn)行,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09vue使用echarts實(shí)現(xiàn)柱狀圖動態(tài)排序效果
echarts在前端開發(fā)中實(shí)屬必不可缺的大數(shù)據(jù)可視化工具,這篇文章主要為大家詳細(xì)介紹了vue如何使用echarts實(shí)現(xiàn)柱狀圖動態(tài)排序效果,感興趣的可以了解下2023-10-10vue使用axios時(shí)關(guān)于this的指向問題詳解
最近在學(xué)習(xí)使用vue+axios,在使用中發(fā)現(xiàn)了一個問題,下面總結(jié)分享給大家,這篇文章主要給大家介紹了關(guān)于vue使用axios時(shí)this的指向問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。2017-12-12vue父組件觸發(fā)事件改變子組件的值的方法實(shí)例詳解
這篇文章主要介紹了vue父組件觸發(fā)事件改變子組件的值的實(shí)例代碼,非常不錯,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05