問(wèn)題描述

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

但是瀏覽器請(qǐng)求出現(xiàn)這個(gè)

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

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

這里是有app.js的 就沒有問(wèn)題

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

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

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

問(wèn)題解答

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

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

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

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

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