問題描述

我想在我的個人博客網站上面部署我的簡歷。想在服務器的域名后面加一個/me的子路徑，訪問我的簡歷。當然我的簡歷是Vue寫的 用vue-cli來構建的部署上服務器了后 npm run dev并且成功的在服務器的端口上運行

但是瀏覽器請求出現這個

里面根本就沒有app.js文件

但是如果你在本地跑這個vue-cli的項目

這里是有app.js的 就沒有問題

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

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

一般部署是用dist文件靜態部署的。難道vue-cli就不可以nginx反向代理到服務器部署么

問題解答

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

1、項目中找到configindex.js；2、將build中的assetsPublicPath:’/’改為assetsPublicPath:’’；3、重新執行打包:npm run build；4、發布，再試試。

對于用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之后可運行的靜態文件。