問題描述

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

但是瀏覽器請求出現(xiàn)這個

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

但是如果你在本地跑這個vue-cli的項(xiàng)目

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

我現(xiàn)在已經(jīng)排除的nginx的問題了。 現(xiàn)在就是vue-cli的構(gòu)建和部署為什么會出現(xiàn)這種情況

服務(wù)器運(yùn)行難道和本地跑是不一樣的碼？

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

問題解答

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

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

對于用vue-cli構(gòu)建的項(xiàng)目，采用npm run dev 啟動服務(wù)適用于開發(fā)模式，相當(dāng)于啟動了一個server。線上部署很少采用這種形式，線上部署都會提前npm run build，將代碼打包到dist目錄中，而dist目錄其實(shí)是可運(yùn)行的index.html+靜態(tài)文件。我們部署的時(shí)候只需要將dist目錄扔到服務(wù)器即可，而不是啟動一個server。nginx配置也比較簡單：

server{ listen 80; server_name domain.com; location /vue {alias /var/www/dist; #dist目錄在服務(wù)器的位置 }}

這樣當(dāng)訪問 https://域名/vue 的時(shí)候，就會定位到dist目錄，而dist目錄就是我們項(xiàng)目build之后可運(yùn)行的靜態(tài)文件。