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