vue.js打包專案後頁面出現空白的解決辦法
相信很多剛剛接觸的夥伴會遇到這樣的問題,就是說vue專案在開發環境下一切正常,但是打包之後,開啟index.html頁面卻是一片空白,開啟控制檯發現這樣的錯誤
出現這種情況要分兩個處理方式(vue-cli2和vue-cli3),先說vue-cli2; 首先找到config/index.檔案,將assetPublicPath的路徑改為“./”即可,
vue-cli3的話要稍微麻煩些,因為vue-cli3簡潔了許多,沒有了配置檔案,所以需要自己建立,只能在專案的根目錄下建立,並且www.cppcns.com檔案的名字只能是vue.config.js,然後在這個檔案裡面加上下面的程式碼即可
module.exports = { asshttp://www.cppcns.cometsDir: 'static',p客棧arallel: false,publicPath: './',}
到了這步本來就可以了,但是有的小夥伴還是沒有顯示出來,那是因為你的路由模式的關係,你把你的路由模式改成“hash”就行了,程式設計客棧雖然有點醜陋,但是至少功能出來了,如果你不想使用“hash”模式,非要用歷史模式的話,本地是不行的,必須要伺服器配合,這裡就說下怎麼使用nginx配合vue使用歷史模式
安裝nginx就不說了 ,假設你已經安裝好了nginx,在server裡面加上
location /aaa {undefined alias D:/bbb/ccc; index index.html index.htm; try_files $uri $uri/ /aaa/index.html; }
其中/aaa是需要訪問的地址, D:/bbb/ccc是你檔案真實存放的路徑,index指的就是你的入口檔案,你的檔名如果不是index.html的話就替換成你的入口檔案的名字,這裡面最重要的是 try_files $uri $uri/ /aaa/index.html 這句話,這句話主要就是用來處理vue的歷史模式的,在配置完nginx後,還要在專案裡面加點東西,其實也很簡單,就在專案的src目錄裡面加上
在config/index.js裡面加上
就可以了,不然的話重新整理頁面就會報錯404,當然這是把專案放在二級路由的情況下,如果是一級路由的話就可以不用加base這個屬性,
最終效果如下。
這裡就完成了vue打包到部署的流程了,希望對大家有些許的幫助吧。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。