關于vue-cli3打包代碼后白屏的解決方案

發布時間：2020-09-16 17:16:55 來源：腳本之家閱讀：772 作者：鄭布斯的個人博客欄目：開發技術

前言：

最近使用了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

關于vue-cli3打包代碼后白屏的解決方案

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

關于vue-cli3打包代碼后白屏的解決方案

以上這篇關于vue-cli3打包代碼后白屏的解決方案就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本