隨著前端技術的不斷發(fā)展，Vue.js作為一種流行的JavaScript框架，被廣泛應用于構建現(xiàn)代化的Web應用程序。而在生產(chǎn)環(huán)境中，我們通常需要借助Web服務器來部署和提供Vue應用的靜態(tài)資源。Nginx作為一款高性能的HTTP和反向代理服務器，成為了許多開發(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打包后的資源文件默認是絕對路徑，只有配置在根目錄才有效。修改vue打包配置，找到vue.config.js,修改publicPath:'/'   為    ' ./  ' ，修改為相對路徑

重新打包，重啟nginx，啟動成功。

下面詳細介紹一下如何在Nginx中部署Vue項目，并為其添加路徑前綴。

一、構建Vue項目

首先確保Vue項目已經(jīng)構建完成。在項目的根目錄下，運行以下命令來生成用于生產(chǎn)環(huán)境的靜態(tài)文件：

npm run build

構建完成后，可以在項目的dist目錄中看到生成的靜態(tài)文件。

二、準備Nginx服務器

我們需要一個已經(jīng)安裝并配置好的Nginx服務器。如果你還沒有安裝Nginx，需要根據(jù)你所使用的操作系統(tǒng)進行安裝。

三、部署Vue項目到Nginx

將Vue項目構建生成的靜態(tài)文件復制到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項目的靜態(tài)文件所在的目錄，try_files指令告訴Nginx如何尋找和返回文件。當請求的路徑不存在時，Nginx會默認返回/my-vue-app/index.html，這對于Vue的單頁應用（SPA）是非常重要的，因為它允許Vue Router接管路由。

五、驗證并重新加載Nginx

保存并關閉配置文件后，你需要驗證Nginx配置的正確性，并重新加載配置以使更改生效。

驗證配置：

nginx -t

如果配置驗證通過，沒有錯誤，那么重新加載Nginx：

sudo systemctl reload nginx

六、訪問你的Vue應用

現(xiàn)在，你可以通過瀏覽器訪問http://your-server-ip/my-vue-app/來查看你的Vue應用了。Nginx將正確地處理路徑前綴，并將請求轉(zhuǎn)發(fā)到Vue應用的靜態(tài)資源。