相信很多剛剛接觸的夥伴會遇到這樣的問題，就是說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.com
 
etsDir: '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打包到部署的流程了，希望對大家有些許的幫助吧。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。