web项目中路径斜杠的加入问题

本文解析了前端与后端中绝对路径与相对路径的区别,介绍了根路径的概念及其在不同场景下的应用,并强调了响应重定向与请求转发之间的区别。

加/是绝对路径,是根路径

不加/是相对路径

根路径:

前端的根路径是http://localhost:8080

后端的根路径是 http://localhost:8080//web_content/

前端:跳转发生在前端,/ 是web服务器的根路径 ,不加 / 是相对当前页面的路径 (如响应重定向)

后端:跳转发生在后端,/ 是web应用的根路径 ,不加 / 是相对当前页面的路径 (如请求转发)

注意:响应重定向的跳转发生在前端,即浏览器的在次发出请求,而请求转发的跳转发生在服务器端

转自:https://blog.csdn.net/u011975349/article/details/110857481

### Vue 3 应用部署到 Nginx 子路径的最佳实践 #### 修改 `vue.config.js` 文件 为了使应用程序能够识别其运行在子路径下,在项目的根目录找到并编辑 `vue.config.js` 文件。对于生产环境和开发环境下不同的 URL 路径,可以通过如下方式设置: ```javascript module.exports = { publicPath: process.env.NODE_ENV === "production" ? "/xinqiao/" : "/" } ``` 此配置项告知构建工具当处于生产环境中时使用 `/xinqiao/` 作为公共资源的基础路径;而在本地开发期间保持为空字符串或斜杠表示根路径[^1]。 #### 设置路由基础路径 接着调整前端路由器的基底路径以匹配实际部署位置。打开位于源码内的 `router/index.js` 并加入相应的 `base` 属性来指明该应用所在的相对路径部分: ```javascript const router = createRouter({ history: createWebHistory('/admin/'), // 或者其他具体的子路径 }) ``` 这一步骤确保了即使页面刷新也能正常工作而不会丢失状态信息[^2]。 #### 配置 NGINX 反向代理 最后也是至关重要的一环是在 Web 服务器端做好相应处理以便正确转发请求给静态资源以及 SPA (单页应用程序) 的入口 HTML 文档。下面给出一段典型的针对上述情况设计的 nginx.conf 示例片段: ```nginx server { listen 80; server_name localhost; location /admin/ { alias /path/to/dist/; try_files $uri $uri/ /index.html; # 如果有API接口,则需额外配置location块指向后端服务 } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } ``` 这段配置实现了对 `/admin/*` 下所有请求都尝试查找对应的物理文件,找不到的话就返回 index.html 让前端接管剩余逻辑,从而支持历史模式下的导航功能。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值