前言 ：

最近使用了vue-cli3.0 開發了一個移動網頁端專案，準備打包釋出了。按照以往的流程 npm run build

問題來了

開啟 dist index.html 檔案發現白屏。開啟除錯後 發現檔案引用路徑不對

根據以往的經驗 根目錄下新建 vue.config.js

配置 publicPath

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

滿心歡喜的開啟，結果還是白屏。開啟除錯發現檔案路徑是正確的，這就唧唧了！！。

發現問題

各種百度。發現了樣的問題 一看vue-router的mode配置可能會影像打包後的連結地址，然後看看我自己的router:

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

vue-router對mode的說明：

mode

型別: string

預設值: "hash" (瀏覽器環境) | "abstract" (Node.js 環境)

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

配置路由模式:

hash: 使用 URL hash 值來作路由。支援所有瀏覽器，包括不支援 HTML5 History Api 的瀏覽器。

history: 依賴 HTML5 History API 和伺服器配置。

abstract: 支援所有 JavaScript 執行環境，如 Node.js 伺服器端。如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式。

解決問題

終於弄明白了，如果使用history模式上線，必須要服務端在伺服器上有對應的模式才能使用history（看上面連結），如果伺服器上沒有配置，可以先使用預設的hash；

補充知識：vue打包專案以後白屏和圖片載入不出來問題解決方法

vue打包專案以後部署訪問白屏。檢視控制檯是404.這是由於打包的時候沒有設定對靜態資源路徑。原檔案是絕對路徑，需要改成相對路徑。

1.白屏修改config/index.js

2.圖片載入不出來，修改build/utils.js

以上這篇關於vue-cli3打包程式碼後白屏的解決方案就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。