vue.js打包項目後頁面出現空白的解決辦法

Posted on by

相信很多剛剛接觸vue的夥伴會遇到這樣的問題，就是說vue項目在開發環境下一切正常，但是打包之後，打開index.html頁面卻是一片空白，打開控制臺發現這樣的錯誤

出現這種情況要分兩個處理方式（vue-cli2和vue-cli3），先說vue-cli2； 首先找到config/index.js文件，將assetPublicPath的路徑改為“./”即可，

vue-cli3的話要稍微麻煩些，因為vue-cli3簡潔瞭許多，沒有瞭配置文件，所以需要自己創建，隻能在項目的根目錄下創建，並且文件的名字隻能是vue.config.js，然後在這個文件裡面加上下面的代碼即可

module.exports = {
    assetsDir: 'static',
    parallel: 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打包到部署的流程瞭，希望對大傢有些許的幫助吧。

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：