Vue項目打包后,部署在服務器,訪問頁面出現空白一片

"好一似,食盡鳥投林,只剩下白茫茫大地,倒也真干凈!"

'' Vue項目打包后,部署在服務器,訪問頁面出現空白一片, 到也真干凈!"

一. Vue項目打包

按部就班的開發完程序后, 每個廚藝精湛的程序猿都迫切的想打包部署運行. 但是, 程序猿的世界,不如意的事情,十之九九.

運行這個牛X的指令, 並如下圖一樣,即打包成功了.

npm run build 

 

二.部署運行

將打包生成的dist文件夾, 放在服務器中, 瀏覽器訪問, 發現訪問成功,但是頁面是空白的,怎么辦呢? 機智的你,先不要看下面的解決方法, 猜一下好不好.

出現這種情況要分兩個處理方式（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 {
            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打包到部署的流程了，希望對大家有些許的幫助吧。

 

本文轉載：https://blog.csdn.net/mawei7510/article/details/103781790