vuejs項(xiàng)目打包之后的首屏加載優(yōu)化及打包之后出現(xiàn)的問題
一:使用CDN資源
我們在打包時(shí),會將package.json里,dependencies對象里插件打包起來,我們可以將其中的一些使用cdn的方式加載,例如不想把vue,axios,vuex,vue-router打包到我們項(xiàng)目中,我們需要這樣:
1:打開webpack.base.conf.js
module.exports = {
externals: {
‘vue‘: ‘Vue‘,
‘a(chǎn)xios‘: ‘a(chǎn)xios‘,
‘vuex‘: ‘Vuex‘,
‘vue-router‘: ‘VueRouter‘
}
}
2:打開router/index.js。注銷掉以下兩行
//import Vue from ‘vue‘ //Vue.use(Router)
3:如果你使用了vuex,把vuex/index.js(命名各有不同)中的Vue.use(Vuex)注銷了
Vue.use(Vuex)
打包后可能出現(xiàn)的問題
1:被keep-alive包圍的元素?zé)o法顯示
原因:暫不明。
解決方法:不用keep-alive
推薦閱讀:Vue項(xiàng)目使用CDN優(yōu)化首屏加載問題
總結(jié)
以上所述是小編給大家介紹的vuejs項(xiàng)目打包之后的首屏加載優(yōu)化及打包之后出現(xiàn)的問題,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時(shí)回復(fù)大家的!
相關(guān)文章
vue ajax 攔截原理與實(shí)現(xiàn)方法示例
這篇文章主要介紹了vue ajax 攔截原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js基于ajax攔截實(shí)現(xiàn)無刷新登錄的相關(guān)原理與操作技巧,需要的朋友可以參考下2019-11-11
el-form表單實(shí)現(xiàn)校驗(yàn)的示例代碼
本文主要介紹了el-form表單實(shí)現(xiàn)校驗(yàn)的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
el-input寬度跟隨輸入內(nèi)容自適應(yīng)的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于el-input寬度跟隨輸入內(nèi)容自適應(yīng)的實(shí)現(xiàn)方法,我們再實(shí)際應(yīng)用中可能需要input文本框能夠根據(jù)輸入字符的所占據(jù)的寬度自動調(diào)節(jié)尺寸,需要的朋友可以參考下2023-08-08
淺談Vue render函數(shù)在ElementUi中的應(yīng)用
今天小編就為大家分享一篇淺談Vue render函數(shù)在ElementUi中的應(yīng)用,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
教你如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境
這篇文章主要介紹了如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境,文中給大家提到了如何讓 Vite 加載 Electron 的內(nèi)置模塊和 Node.js 的內(nèi)置模塊,需要的朋友可以參考下2022-11-11

