關于vue-cli3打包代碼后白屏的解決方案
前言 ：
最近使用了vue-cli3.0 開發(fā)了一個移動網頁端項目，準備打包發(fā)布了。按照以往的流程 npm run build
問題來了
打開 dist index.html 文件發(fā)現白屏。打開調試后 發(fā)現文件引用路徑不對
根據以往的經驗 根目錄下新建 vue.config.js
配置 publicPath
module.exports = {
...
runtimeCompiler: true,
publicPath: './'
...
}
滿心歡喜的打開，結果還是白屏。打開調試發(fā)現文件路徑是正確的，這就唧唧了??！。
發(fā)現問題
各種百度。發(fā)現了樣的問題 一看vue-router的mode配置可能會影像打包后的鏈接地址，然后看看我自己的router:
var router = new Router({
mode: 'history'
})
vue-router對mode的說明：
mode
類型: string
默認值: "hash" (瀏覽器環(huán)境) | "abstract" (Node.js 環(huán)境)
可選值: "hash" | "history" | "abstract"
配置路由模式:
hash: 使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器。
history: 依賴 HTML5 History API 和服務器配置。
abstract: 支持所有 JavaScript 運行環(huán)境，如 Node.js 服務器端。如果發(fā)現沒有瀏覽器的 API，路由會自動強制進入這個模式。
解決問題
終于弄明白了，如果使用history模式上線，必須要服務端在服務器上有對應的模式才能使用history（看上面鏈接），如果服務器上沒有配置，可以先使用默認的hash；
補充知識：vue打包項目以后白屏和圖片加載不出來問題解決方法
vue打包項目以后部署訪問白屏。查看控制臺是404.這是由于打包的時候沒有設置對靜態(tài)資源路徑。原文件是絕對路徑，需要改成相對路徑。
1.白屏修改config/index.js
2.圖片加載不出來，修改build/utils.js
以上這篇關于vue-cli3打包代碼后白屏的解決方案就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue中scoped樣式的作用是通過在DOM結構和CSS樣式上添加唯一標記來實現樣式私有化和模塊化,這一功能是通過PostCSS轉譯實現的,總結了三條渲染規(guī)則：1. 為HTML DOM節(jié)點添加不重復的data屬性；2. 在每個CSS選擇器末尾添加當前組件的data屬性選擇器2025-01-01
這篇文章主要介紹了Vue-CLI 3.X 部署項目至生產服務器的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
Vue項目代碼之路由拆分、Vuex模塊拆分、element按需加載詳解
這篇文章主要介紹了Vue項目代碼之路由拆分、Vuex模塊拆分、element按需加載,項目較大路由較多時，路由拆分是一個不錯的代碼優(yōu)化方案，按不同業(yè)務分為多個模塊，結構清晰便于統一管理，本文通過示例給大家詳細講解，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue實現table表格里面數組多層嵌套取值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Ant Design Vue Table組件合并單元格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本文通過圖文并茂的形式給大家介紹了Vue組件之自定義事件的功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-02-02
這篇文章主要為大家詳細介紹了vue實現頁面添加水印功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
我們在做項目的時候經常會遇到跨域的問題,下面這篇文章主要給大家介紹了關于Vite配置代理Proxy解決跨域問題的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue 的 v-model用法實例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-11-11
本節(jié)，我們將討論關于AST的轉換。所謂AST的轉換，指的是對AST進行一系列操作，將其轉換為新的AST的過程。新的AST可以是原語言或原DSL的描述，也可以是其他語言或其他DSL的描述。例如，我們可以對模板AST進行操作，將其轉換為JavaScriptAST2023-01-01