關於vue-cli3打包程式碼後白屏的解決方案
前言 :
最近使用了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打包程式碼後白屏的解決方案就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。