vue打包後出現空白頁的原因及解決方式詳解

2022-07-24 18:00:03

路由模式 history

新建專案什麼都不動，路由模式：history, 直接npm run build打包

打包之後，直接開啟dist檔案裡面的ndex.html可以看到頁面是空白的，控制檯是這樣的。

再看看網頁原始碼, 對比dist資料夾結構可以看到資源路徑的引入是錯誤的，應該用'./'而不是'/'

那怎麼修改打包之後的路徑呢？檢視vue-cli官網設定參考中的publicPath

我們只需要在和package.json同級的地方新增一個vue.config.js檔案，將路徑修改為相對路徑'./'

// vue.config.js
module.exports = {
    publicPath: './',
}

再次打包, 頁面不是空白了，但還有很多東西沒顯示完，正常的頁面是這個樣子

打包之後是這樣子

點選About進行路由跳轉是這樣子

改一下路由模式，找到router/index.js檔案, 將history修改為hash, 再進行打包

// router/index.js
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

頁面顯示和路由跳轉就都可以了

// vue.config.js
module.exports = {
    publicPath: './',
}

// router/index.js
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

首先hash模式url帶#號，history不帶#號
hash模式前端路由修改的是hash值(#及以後)，對後端沒影響，因此改變hash也不會重新載入頁面，比如修改為了不存在的#123頁面，頁面不會跳轉;
history模型剛好相反，沒有對應的頁面就會出現404

到此這篇關於vue打包後出現空白頁的原因及解決方式的文章就介紹到這了,更多相關vue打包後空白頁解決內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！