vue項目使用CDN引入的配置與易出錯點
更新時間：2022年05月24日 09:53:36 作者：不叫貓先生
在日常開發(fā)過程中,為了減少最后打包出來的體積,我們會用到cdn引入一些比較大的庫來解決,下面這篇文章主要給大家介紹了關于vue項目使用CDN引入的配置與易出錯點的相關資料,需要的朋友可以參考下
前言
CDN（內(nèi)容分發(fā)網(wǎng)絡）指請求資源的方式，即通過script頭去請求對應的腳本資源的一種方式，項目里配置之后不需要通過npm包管理工具去下載配置的包。
目的：將引用的外部js、css文件剝離開來，不編譯到vendor.js中，而是用資源的形式引用，這樣瀏覽器可以使用多個線程異步將vendor.js、外部的js等加載下來，達到加速首頁展示效果。
1. 在vue.config.js進行配置
本人對vue、vuex、vue-router、axios、element-ui、echarts進行了cdn引用。（請求element-ui、echarts的cdn較慢）
//生產(chǎn)環(huán)境標記
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'
]
}
//配置打包時使用CDN節(jié)點（加入externals外部擴展）， 忽略打包的第三方庫
//左面放package.json中的擴展的名稱,右面放項目依賴的名稱(項目初始化要用的名稱)
const externals = {
// 屬性名稱 vue, 表示遇到 import xxx from 'vue' 這類引入 'vue'的，不去 node_modules 中找，而是去找全局變量 Vue（其他的為VueRouter、Vuex、axios、ELEMENT、echarts，注意全局變量是一個確定的值，不能修改為其他值，修改為其他大小寫或者其他值會報錯，若有異議可留言）
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
})
//視為一個外部庫，而不將它打包進來
config.externals(externals)
}
}
2.在public/index.html文件配置
使用 webpack中自帶的插件 html插件進行配置，在 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.易出錯點 Router is not defined
解決方案： 將Router 改為 ‘VueRouter’Uncaught TypeError: Illegal constructor
解決方案：修改externals 中‘'element-ui’的value
const externals = {
'element-ui': 'ELEMENT',
}
總結
到此這篇關于vue項目使用CDN引入的配置與易出錯點的文章就介紹到這了,更多相關vue項目CDN引入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
使用Vue3和Pinia實現(xiàn)網(wǎng)頁刷新功能
在現(xiàn)代 Web 開發(fā)中,保持用戶界面的動態(tài)性和響應性至關重要,當用戶觸發(fā)某些操作時,例如點擊按鈕或者完成表單提交,我們往往需要刷新頁面的一部分來展示最新的數(shù)據(jù),本文將介紹如何使用 Vue 3 和 Pinia 來實現(xiàn)這一功能,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了一個手寫的vue放大鏡，組件使用less，文中給出了示例代碼,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue-photo-preview圖片預覽失效的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3?+?elementPlus?reset重置表單問題
這篇文章主要介紹了vue3?+?elementPlus?reset重置表單問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
本篇文章主要介紹了淺談vue-lazyload實現(xiàn)的詳細過程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家介紹了JavaScript獲取echart曲線上任意點位的值詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
Vue動態(tài)加載圖片在跨域時無法顯示的問題及解決方法
這篇文章主要介紹了解決VUE動態(tài)加載圖片在跨域時無法顯示的問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
Vue3帶來了許多性能優(yōu)化和效率提升的特性，本文將重點討論Vue3在靜態(tài)提升、預字符串化、緩存事件處理函數(shù)、Block?Tree和PatchFlag方面的改進，我們將通過對比Vue2和Vue3的編譯結果來說明這些方面的效率提升2023-12-12
深入理解與使用keep-alive(配合router-view緩存整個路由頁面)
這篇文章主要介紹了深入理解與使用keep-alive(配合router-view緩存整個路由頁面)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在本篇文章里我們給大家整理的是關于vue指令v-html使用過濾器filters功能的實例內(nèi)容，需要的朋友們學習下。2019-10-10