欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于vue-cli3打包代碼后白屏的解決方案

 更新時(shí)間：2020年09月02日 12:05:03   作者：鄭布斯的個(gè)人博客  
這篇文章主要介紹了關(guān)于vue-cli3打包代碼后白屏的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

前言 ：

最近使用了vue-cli3.0 開發(fā)了一個(gè)移動(dòng)網(wǎng)頁(yè)端項(xiàng)目，準(zhǔn)備打包發(fā)布了。按照以往的流程 npm run build

問(wèn)題來(lái)了

打開 dist index.html 文件發(fā)現(xiàn)白屏。打開調(diào)試后 發(fā)現(xiàn)文件引用路徑不對(duì)

根據(jù)以往的經(jīng)驗(yàn) 根目錄下新建 vue.config.js

配置 publicPath

module.exports = {
  ...
  runtimeCompiler: true,
  publicPath: './'
  ...
}

滿心歡喜的打開，結(jié)果還是白屏。打開調(diào)試發(fā)現(xiàn)文件路徑是正確的，這就唧唧了??！。

發(fā)現(xiàn)問(wèn)題

各種百度。發(fā)現(xiàn)了樣的問(wèn)題 一看vue-router的mode配置可能會(huì)影像打包后的鏈接地址，然后看看我自己的router:

var router = new Router({ 
mode: 'history' 
})

vue-router對(duì)mode的說(shuō)明：

mode

類型: string

默認(rèn)值: "hash" (瀏覽器環(huán)境) | "abstract" (Node.js 環(huán)境)

可選值: "hash" | "history" | "abstract"

配置路由模式:

hash: 使用 URL hash 值來(lái)作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器。

history: 依賴 HTML5 History API 和服務(wù)器配置。

abstract: 支持所有 JavaScript 運(yùn)行環(huán)境，如 Node.js 服務(wù)器端。如果發(fā)現(xiàn)沒(méi)有瀏覽器的 API，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入這個(gè)模式。

解決問(wèn)題

終于弄明白了，如果使用history模式上線，必須要服務(wù)端在服務(wù)器上有對(duì)應(yīng)的模式才能使用history（看上面鏈接），如果服務(wù)器上沒(méi)有配置，可以先使用默認(rèn)的hash；

補(bǔ)充知識(shí)：vue打包項(xiàng)目以后白屏和圖片加載不出來(lái)問(wèn)題解決方法

vue打包項(xiàng)目以后部署訪問(wèn)白屏。查看控制臺(tái)是404.這是由于打包的時(shí)候沒(méi)有設(shè)置對(duì)靜態(tài)資源路徑。原文件是絕對(duì)路徑，需要改成相對(duì)路徑。

1.白屏修改config/index.js

2.圖片加載不出來(lái)，修改build/utils.js

以上這篇關(guān)于vue-cli3打包代碼后白屏的解決方案就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論