nginx 部署 vue 加前缀配置

### Nginx 中部署 Vue 应用并添加 URL 前缀

为了在 Nginx 中成功部署带有 URL 前缀的 Vue 应用程序，需遵循特定的配置方式来确保应用程序能够正确解析路由。以下是详细的说明：

#### 修改 `vue.config.js` 文件支持 URL 前缀

对于前端部分，在构建 Vue 项目之前，应该调整项目的公共路径以便于适应 URL 前缀的要求。这可以通过编辑 `vue.config.js` 来实现。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/your-url-prefix/' // 设置生产环境下的公共路径为指定前缀
    : '/'
}

此设置会告知 Webpack 将所有的静态资源链接都加上 `/your-url-prefix/` 这样的前缀[^1]。

#### 配置 Nginx 支持带前缀的应用访问

接下来是在 Nginx 上进行相应的配置以处理带有前缀的请求。下面是一个典型的 Nginx 配置片段用于服务带有 URL 前缀 (`/your-url-prefix`) 的单页面应用 (SPA):

server {
    listen       80;
    server_name  localhost;

    # 定义根目录指向Vue打包后的dist文件夹位置
    root         /path/to/vue/dist;

    location /your-url-prefix/ {
        try_files $uri $uri/ /index.html;  # 处理HTML5模式下刷新页面的问题
        
        # 对应到实际物理路径中的/index.html, 让其负责重定向至正确的组件视图.
        
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        add_header Cache-Control no-cache;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

上述配置中，通过定义 `location /your-url-prefix/ {...}` 实现了对任何匹配该前缀的请求都将被转发给位于 `/path/to/vue/dist` 路径下的静态 HTML 文件，并利用 `try_files` 指令解决了 SPA 刷新时找不到对应路由的问题[^2]。