vue.js - 關於Vue-cli專案在VPS中用Nginx部署完請求頁面app.js找不到提示404錯誤。

Question

我想在我的個人部落格網站上面部署我的履歷。
想在伺服器的網域後面加上一個/me的子路徑，存取我的履歷。
當然我的履歷是Vue寫的 用vue-cli來建構的
部署上伺服器了後 npm run dev並且成功的在伺服器的連接埠上執行

但是瀏覽器請求出現這個

#裡面根本沒有app.js檔

但如果你在本地跑這個vue-cli的專案

#這裡有app.js的 就沒問題

我現在已經排除的nginx的問題了。 現在就是vue-cli的建置與部署為什麼會出現這種情況

伺服器運行難道和本地跑是不一樣的碼？

一般部署是用dist檔案靜態部署的。難道vue-cli就不能nginx反向代理到伺服器部署麼

Answer 1

其實這個問題我自己解決了。在nginx上不要將專案部署在非根目錄上，路徑很容易會錯的。如果伺服器有多個項目，那麼可以在nginx上面配置不同連接埠的server 或直接弄二級網域來指向nginx。

Answer 2

1、專案中找到configindex.js；
2、将build中的assetsPublicPath:'/'改为assetsPublicPath:''；
3、重新执行打包:npm run build；
4、發布，再試試。

Answer 3

對於用vue-cli建構的項目，採用npm run dev 启动服务适用于开发模式，相当于启动了一个server。
线上部署很少采用这种形式，线上部署都会提前npm run build，将代码打包到dist目錄中，而dist目錄其實是可運作的index.html+靜態檔。我們部署的時候只需要將dist目錄丟到伺服器即可，而不是啟動一個server。
nginx配置也比較簡單：

server{
    listen 80;
    server_name domain.com;
    location /vue {
        alias /var/www/dist; #dist目录在服务器的位置
    }
}

這樣當訪問 https://域名/vue 的時候，就會定位到dist目錄，而dist目錄就是我們專案build之後可運行的靜態檔案。