webpack - vue-cli寫的項目（本地跑沒有問題），準備放到Nginx伺服器上，有什麼設定需要改的？還有怎麼部署？

Question

本地直接用Vue-cli建造的項目，webpack配置沒有動過，本地跑的沒有任何問題，但是打算放到Nginx伺服器上，要改什麼配置嗎？那Nginx又要怎麼部署？

我搜了一下，有的說在config下的index.js中改assetsPublicPath: './'（/a/11...）

有的說在webpack.prod.conf.js的output中加入publicPath:'./'（http://blog.csdn.net/gebitan5...）

都試過後都還是在伺服器上打不開，求助求助~~~~

#

Answer 1

如果只是Vue的話, 通過npm run build打包, 然後再把dist裡面的靜態文件發佈到伺服器中, 在Nginx配置中通過location 路徑配置指向靜態文件的文件夾, 這樣會直接訪問該文件夾夾下的index.html檔案的..

Answer 2

如果想直接透過網域來存取你build後的項目，例如hzzly.net，那麼config下的index.js中改assetsPublicPath: '/'不需要改，如果想網域後再加一層，例如hzzly.net /resume，那麼config下的index.js中改為assetsPublicPath: '/resume/'，下面nginx配置可以不變，直接在網站主目錄新建resume資料夾即可。

server {
        listen       80;
        server_name  localhost;

        location / {
            root   /home/hzzly;  //这里配置网站主目录
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

Answer 3

載入首頁，查看HTML文件，查看資源參考路徑是否正確。
類似上圖，查看src中的路徑，在你伺服器中資源是否正確。如果不正確的話，就去webpack修改資源打包路徑。

Answer 4

是不是訪問js 404？