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)文章
vue3組合式API中setup()概念和reactive()函數(shù)的用法
這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來的事件,我將帶著你從淺到深分析為什么我們需要學(xué)習(xí)組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個(gè)基本的使用方式,需要的朋友可以參考下2023-03-03vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式
這篇文章主要介紹了vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05Vue?vant-ui框架實(shí)現(xiàn)上拉加載下拉刷新功能
功能需求——獲取后端接口返回的數(shù)據(jù),實(shí)現(xiàn)列表數(shù)據(jù)上滑加載更多下一頁數(shù)據(jù),下拉數(shù)據(jù)刷新功能,結(jié)合vant-ui框架實(shí)現(xiàn)??芍苯訁⒖际褂?/div> 2022-09-09vue2使用思維導(dǎo)圖jsmind的詳細(xì)代碼
jsMind是一個(gè)基于Js的思維導(dǎo)圖庫,jsMind是一個(gè)純JavaScript類庫,用于創(chuàng)建、展示和操作思維導(dǎo)圖,這篇文章主要給大家介紹了關(guān)于vue2使用思維導(dǎo)圖jsmind的詳細(xì)代碼,需要的朋友可以參考下2024-06-06Vue $router.push打開新窗口的實(shí)現(xiàn)方法
在Vue中,$router.push方法默認(rèn)不支持在新窗口中打開頁面,但通過結(jié)合window.open方法和$router.resolve方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-09-09vue自定義加載指令v-loading占位圖指令v-showimg
這篇文章主要為大家介紹了vue自定義加載指令和v-loading占位圖指令v-showimg的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08vue3輸入框生成的時(shí)候如何自動獲取焦點(diǎn)詳解
記錄一下自己最近開發(fā)vue3.0的小小問題,下面這篇文章主要給大家介紹了關(guān)于vue3輸入框生成的時(shí)候如何自動獲取焦點(diǎn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09詳解Vue項(xiàng)目中實(shí)現(xiàn)錨點(diǎn)定位
這篇文章主要介紹了Vue項(xiàng)目中實(shí)現(xiàn)錨點(diǎn)定位,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04最新評論