Nginx 支持單域名多 Vue 服務配置備忘

最近開發時，遇到須要使用同一域名承載多個前端項目的場景，具體需求以下：

1. /v2 訪問新版本前端項目
2. /api 訪問後端 Spring Boot 接口服務
3. / 訪問默認前端項目

1. Nginx 配置內容

server {
    listen       80;
    listen       [::]:80;
    server_name  _;

    server_name_in_redirect off;
    proxy_set_header Host $host;

    location /api {
        proxy_pass http://0.0.0.0:0000;
    }

    location / {
        index  index.html;
        root /path/to/main/web/app;
    }

    location /v2 {
        index  index.html;
        root /path/to/v2/web/app;
    }
}

2. 修改 publicPath 配置

僅僅經過上述配置，在訪問新版前端時，會遇到資源文件沒法找到的問題。

此時，能夠經過對新版前端 vue.config.js 文件中的 publicPath 進行配置，以規避這一問題（ 注：該方法僅適用於 Vue-Cli 3.x 構建的項目 ）：

module.exports = {
    ...
    
    publicPath: '/v2/',
    
    ...
};

參考連接

1. Understanding the difference between the root and alias directives in Nginx；
2. Can't get two single page applications to run together on one server using nginx；