vue打包后出現(xiàn)空白頁的原因及解決方式詳解
更新時間：2022年07月24日 16:44:56 作者：溫情key
在項目中很多時候需要用到vue打包成html不需要放在服務(wù)器上就能瀏覽,根據(jù)官網(wǎng)打包出來的html直接打開是顯示空白,下面這篇文章主要給大家介紹了關(guān)于vue打包后出現(xiàn)空白頁的原因及解決方式的相關(guān)資料,需要的朋友可以參考下
路由模式 history
新建項目什么都不動，路由模式：history, 直接npm run build打包
打包之后，直接打開dist文件里面的ndex.html可以看到頁面是空白的，控制臺是這樣的。
再看看網(wǎng)頁源碼, 對比dist文件夾結(jié)構(gòu)可以看到資源路徑的引入是錯誤的，應(yīng)該用'./'而不是'/'
那怎么修改打包之后的路徑呢？查看vue-cli官網(wǎng)配置參考中的publicPath
我們只需要在和package.json同級的地方新增一個vue.config.js文件，將路徑修改為相對路徑'./'
// vue.config.js
module.exports = {
publicPath: './',
}
再次打包, 頁面不是空白了，但還有很多東西沒顯示完，正常的頁面是這個樣子
打包之后是這樣子
點擊About進行路由跳轉(zhuǎn)是這樣子
路由模式 hash
改一下路由模式，找到router/index.js文件, 將history修改為hash, 再進行打包
// router/index.js
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes
})
頁面顯示和路由跳轉(zhuǎn)就都可以了
總結(jié)
1. 修改路徑
// vue.config.js
module.exports = {
publicPath: './',
}
2. 更改路由模式
// router/index.js
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes
})
路由模式拓展
路由的hash和history模式的區(qū)別
- 首先hash模式url帶#號，history不帶#號
- hash模式前端路由修改的是hash值(#及以后)，對后端沒影響，因此改變hash也不會重新加載頁面，比如修改為了不存在的#123頁面，頁面不會跳轉(zhuǎn);
history模型剛好相反，沒有對應(yīng)的頁面就會出現(xiàn)404
打包路由選擇
- 前端測試用 hash 模式
- 項目上線不想要url帶#號的話使用history模式，不過使用history模式需要與后端溝通，需后端配置
到此這篇關(guān)于vue打包后出現(xiàn)空白頁的原因及解決方式的文章就介紹到這了,更多相關(guān)vue打包后空白頁解決內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue+express+Socket實現(xiàn)聊天功能
這篇文章主要為大家詳細介紹了Vue+express+Socket實現(xiàn)聊天功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue使用自定義的icon圖標的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了nuxt實現(xiàn)封裝axios并且獲取token,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue安裝node-sass和sass-loader報錯問題的解決辦法
這篇文章主要給大家介紹了關(guān)于vue安裝node-sass和sass-loader報錯問題的解決辦法,文中通過圖文以及示例代碼將解決的方法介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-01-01
vue-element-admin如何轉(zhuǎn)換成中文
這篇文章主要介紹了vue-element-admin如何轉(zhuǎn)換成中文問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue+echarts+datav大屏數(shù)據(jù)展示及實現(xiàn)中國地圖省市縣下鉆功能
這篇文章主要介紹了vue+echarts+datav大屏數(shù)據(jù)展示及實現(xiàn)中國地圖省市縣下鉆,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數(shù)據(jù)數(shù)組，而 item 則是被迭代的數(shù)組元素的別名。今天通過本文給大家介紹Vue中v-for更新檢測的操作方法，感興趣的朋友一起看看吧2021-10-10
vue 生成gzip壓縮包部署到nginx服務(wù)器，如果我們把web網(wǎng)站資源進行g(shù)zip壓縮后進行傳輸給瀏覽器，這樣就能加快網(wǎng)站資源的加載速度，這篇文章主要介紹了vue生成gzip壓縮包部署到nginx,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue如何使用媒體查詢實現(xiàn)響應(yīng)式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue如何實現(xiàn)分批加載數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04