?在Nginx中部署Vue項目并添加路徑前綴
隨著前端技術(shù)的不斷發(fā)展，Vue.js作為一種流行的JavaScript框架，被廣泛應(yīng)用于構(gòu)建現(xiàn)代化的Web應(yīng)用程序。而在生產(chǎn)環(huán)境中，我們通常需要借助Web服務(wù)器來部署和提供Vue應(yīng)用的靜態(tài)資源。Nginx作為一款高性能的HTTP和反向代理服務(wù)器，成為了許多開發(fā)者的首選。
一個案例：
一個客戶提出希望在部署后的路徑上添加一個項目前綴weijishu，原來訪問地址是http://192.168.11.12:8888，現(xiàn)希望改成http://192.168.11.12:8888/weijishu才能正常訪問，查閱諸多資料，從nginx部署多個前端項目中找到靈感。
server {
listen 8081;
server_name localhost;
location / {
#不修改此處，確保用戶直接輸入ip+端口無法訪問到系統(tǒng)
root html;index index.html index.htm;
}
location /weijishu {
#添加前綴,但html中存放vue的目錄名盡量也要改成相同名字
alias html/weijishu;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}改好配置后，發(fā)現(xiàn)頁面一片空白，審查元素，發(fā)現(xiàn)資源文件都是404，如下圖：
原因是vue打包后的資源文件默認(rèn)是絕對路徑，只有配置在根目錄才有效。修改vue打包配置，找到vue.config.js,修改publicPath:'/' 為 ' ./ ' ，修改為相對路徑
重新打包，重啟nginx，啟動成功。
下面詳細(xì)介紹一下如何在Nginx中部署Vue項目，并為其添加路徑前綴。
一、構(gòu)建Vue項目
首先確保Vue項目已經(jīng)構(gòu)建完成。在項目的根目錄下，運行以下命令來生成用于生產(chǎn)環(huán)境的靜態(tài)文件：
npm run build構(gòu)建完成后，可以在項目的dist目錄中看到生成的靜態(tài)文件。
二、準(zhǔn)備Nginx服務(wù)器
我們需要一個已經(jīng)安裝并配置好的Nginx服務(wù)器。如果你還沒有安裝Nginx，需要根據(jù)你所使用的操作系統(tǒng)進行安裝。
三、部署Vue項目到Nginx
將Vue項目構(gòu)建生成的靜態(tài)文件復(fù)制到Nginx服務(wù)器的適當(dāng)位置。
四、配置Nginx
打開Nginx的配置文件，一般位于/etc/nginx/nginx.conf或/etc/nginx/sites-available/default。
在配置文件中找到server塊，然后添加一個新的location塊來指定Vue項目的訪問路徑。例如，如果你想將Vue項目部署在/my-vue-app/路徑下，可以添加以下配置：
server {
# ... 其他配置 ...
location /my-vue-app/ {
root /path/to/your/vue/dist;
try_files $uri $uri/ /my-vue-app/index.html;
}
# ... 其他配置 ...
}在上述配置中，root指令指定了Vue項目的靜態(tài)文件所在的目錄，try_files指令告訴Nginx如何尋找和返回文件。當(dāng)請求的路徑不存在時，Nginx會默認(rèn)返回/my-vue-app/index.html，這對于Vue的單頁應(yīng)用（SPA）是非常重要的，因為它允許Vue Router接管路由。
五、驗證并重新加載Nginx
保存并關(guān)閉配置文件后，你需要驗證Nginx配置的正確性，并重新加載配置以使更改生效。
驗證配置：
nginx -t如果配置驗證通過，沒有錯誤，那么重新加載Nginx：
sudo systemctl reload nginx六、訪問你的Vue應(yīng)用
現(xiàn)在，你可以通過瀏覽器訪問http://your-server-ip/my-vue-app/來查看你的Vue應(yīng)用了。Nginx將正確地處理路徑前綴，并將請求轉(zhuǎn)發(fā)到Vue應(yīng)用的靜態(tài)資源。
