nginx根据前缀匹配文件夹

1、所有以 web开头的URL跳转到某个路径

    location ^~  /web- {
        root /opt/deploy/web/;
    }

 

### Nginx 中部署 Vue 应用并添加 URL 前缀 为了在 Nginx 中成功部署带有 URL 前缀的 Vue 应用程序,需遵循特定的配置方式来确保应用程序能够正确解析路由。以下是详细的说明: #### 修改 `vue.config.js` 文件支持 URL 前缀 对于前端部分,在构建 Vue 项目之前,应该调整项目的公共路径以便于适应 URL 前缀的要求。这可以通过编辑 `vue.config.js` 来实现。 ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/your-url-prefix/' // 设置生产环境下的公共路径为指定前缀 : '/' } ``` 此设置会告知 Webpack 将所有的静态资源链接都加上 `/your-url-prefix/` 这样的前缀[^1]。 #### 配置 Nginx 支持带前缀的应用访问 接下来是在 Nginx 上进行相应的配置以处理带有前缀的请求。下面是一个典型的 Nginx 配置片段用于服务带有 URL 前缀 (`/your-url-prefix`) 的单页面应用 (SPA): ```nginx 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]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值