vue.js打包項目后頁面出現(xiàn)空白的解決辦法

更新時間：2021年11月28日 11:34:53 作者：qq_251025116

這篇文章主要介紹了vue.js打包項目后頁面出現(xiàn)空白的解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

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

vue-cli3的話要稍微麻煩些，因為vue-cli3簡潔了許多，沒有了配置文件，所以需要自己創(chuàng)建，只能在項目的根目錄下創(chuàng)建，并且文件的名字只能是vue.config.js，然后在這個文件里面加上下面的代碼即可

module.exports = {
    assetsDir: 'static',
    parallel: false,
    publicPath: './',
}

到了這步本來就可以了，但是有的小伙伴還是沒有顯示出來，那是因為你的路由模式的關系，你把你的路由模式改成“hash”就行了，雖然有點丑陋，但是至少功能出來了，如果你不想使用“hash”模式，非要用歷史模式的話，本地是不行的，必須要服務器配合，這里就說下怎么使用nginx配合vue使用歷史模式

安裝nginx就不說了，假設你已經(jīng)安裝好了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目錄里面加上