vue打包后出現(xiàn)空白頁(yè)的解決方法

這篇文章主要介紹了vue打包后出現(xiàn)空白頁(yè)的解決方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。下面就和我一起來(lái)看看吧。

目錄

• 路由模式 history

• 路由模式 hash

• 總結(jié)

• 1. 修改路徑

• 2. 更改路由模式

• 路由模式拓展

• 路由的hash和history模式的區(qū)別

• 打包路由選擇

路由模式 history

新建項(xiàng)目什么都不動(dòng)，路由模式：history, 直接npm run build打包

打包之后，直接打開(kāi)dist文件里面的ndex.html可以看到頁(yè)面是空白的，控制臺(tái)是這樣的。

再看看網(wǎng)頁(yè)源碼, 對(duì)比dist文件夾結(jié)構(gòu)可以看到資源路徑的引入是錯(cuò)誤的，應(yīng)該用'./'而不是'/'

那怎么修改打包之后的路徑呢？查看vue-cli官網(wǎng)配置參考中的publicPath

我們只需要在和package.json同級(jí)的地方新增一個(gè)vue.config.js文件，將路徑修改為相對(duì)路徑'./'

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

再次打包, 頁(yè)面不是空白了，但還有很多東西沒(méi)顯示完，正常的頁(yè)面是這個(gè)樣子

打包之后是這樣子

點(diǎn)擊About進(jìn)行路由跳轉(zhuǎn)是這樣子

路由模式 hash

改一下路由模式，找到router/index.js文件, 將history修改為hash, 再進(jìn)行打包

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

頁(yè)面顯示和路由跳轉(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ū)別

1. 首先hash模式url帶#號(hào)，history不帶#號(hào)

2. hash模式前端路由修改的是hash值(#及以后)，對(duì)后端沒(méi)影響，因此改變hash也不會(huì)重新加載頁(yè)面，比如修改為了不存在的#123頁(yè)面，頁(yè)面不會(huì)跳轉(zhuǎn);
   history模型剛好相反，沒(méi)有對(duì)應(yīng)的頁(yè)面就會(huì)出現(xiàn)404

打包路由選擇

• 前端測(cè)試用 hash 模式

• 項(xiàng)目上線不想要url帶#號(hào)的話使用history模式，不過(guò)使用history模式需要與后端溝通，需后端配置

以上就是vue打包后出現(xiàn)空白頁(yè)的解決方法的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來(lái)億速云行業(yè)資訊！