Web路径 带/ 不带/

博主在学习SpringMVC时,发现路径带/和不带/存在诸多问题。此次主要讲解前端文件路径带/和不带/的情况,还提及后台spring.xml配置路径为/in.do时,在浏览器中查找页面的相关路径问题。

最近在学springmvc,发现在路径的带/和不带/上有很多的问题,

所以今天讲一下前端文件,路径带/和不带/的问题

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>主题</title>
  </head>
  <body>
       <!--1.直接写页面在前端的绝对路径-->
	<a  href="http://localhost:8080/01_primary_war_exploded/in.do">跳转页面</a>
	
	<!--2.写带/的相对路径
	前台路径在有/的时候参照路径是:http://localhost:8080
	因为 绝对路径=参照路径 + 相对路径 所以为/01_primary_war_exploded/in.do
	-->
	<a  href="/01_primary_war_exploded/in.do">跳转页面</a>
	
	<!--3.不带/的相对路径
	前台路径在无/的时候参照路径是当前的访问路径:http://localhost:8080/01_primary_war_exploded
	所以应填in.do-->
	<a  href="in.do">跳转页面</a>
	
	  </body>
</html>

后台spring.xml配置时 如果路径为/in.do怎么在浏览器中找到页面

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
       ">
     <!--浏览器必须提交如下绝对路径才能访问到MyController这个资源:
     这个路径出现在xml文件里,所以是个后台路径,后台路径参照的是:Web应用根路径
     Web根路径为:http://localhost:8080/01_primary_war_exploded/-->
    <bean id="/in.do" class="com.bjpowernode.handlers.MyController"/>
</beans>

即为如下路径
在这里插入图片描述

<think>我们正在处理一个Vue项目打包后静态资源路径错误的问题。用户希望在路径前添加'web/',但这样会导致static文件夹下的资源无法找到。根据引用内容,我们可以总结出以下几点: 1. 引用[1]中提到,打包后路径多了一个斜杠导致错误,类似`<script type=text/javascript src=/static/js/app...`,这里路径是绝对路径,缺少了baseUrl。 2. 引用[2]指出,Vue CLI打包的默认目录是`dist`,而Flask期望静态资源在`static`目录下,路径匹配。 3. 引用[3]和[4]提供了解决方案:修改配置以正确设置静态资源路径。 根本原因:Vue项目默认的静态资源路径是相对于域名的根路径,当我们在路径前添加'web/'时,实际部署的静态资源路径变成了`域名/web/static/...`,但打包后的资源引用路径可能还是`/static/...`(绝对路径),这样就会导致资源加载失败。 解决方案: 1. 设置Vue的公共路径(publicPath)为'./',这样资源会使用相对路径引用,但这样可能无法满足在子路径下部署的需求(比如部署在'web'子路径下)。 2. 更合适的做法是设置publicPath为`/web/`,这样资源引用路径会变成`/web/static/...`,与部署路径匹配。 具体步骤: - 在Vue项目的根目录下,找到`vue.config.js`文件(如果没有则创建)。 - 在该文件中配置`publicPath`选项。 例如: ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/web/' // 生产环境路径 : '/' // 开发环境路径 } ``` 这样配置后,打包生成的index.html中引用资源的路径就会变成`/web/static/...`,与部署路径匹配。 另外,关于静态资源(如图片)的引用问题: - 在Vue组件中,使用相对路径引用图片(会被webpack处理),但要注意,如果图片放在`public`目录下(或`static`目录,取决于Vue CLI版本),则需要使用绝对路径publicPath)引用。 - 对于直接放在`public`目录下的资源,可以通过`<img src="<%= webpackConfig.output.publicPath %>img/logo.png">`的方式引用(在public/index.html中),或者使用环境变量。 注意:Vue CLI 3及以上版本默认将静态资源放在`public`目录下(旧版可能是`static`)。在构建时,`public`目录下的文件会被复制到输出目录的根目录(或publicPath指定的路径下)。因此,确保在部署时,`public`目录下的资源被正确复制到`/web/`路径下。 如果部署后仍然有资源找到,请检查: - 构建后的`dist`目录结构:应该包含`web`目录吗?实际上,配置publicPath并会改变输出目录的结构,而是改变资源引用的前缀。所以,构建后的文件结构变,但引用路径前会加上`/web/`。 - 部署时,需要将整个`dist`目录下的内容放在服务器的`web`目录下(或服务器根目录,但通过服务器配置将`/web/`指向该目录)。 例如,使用Nginx部署,可以将dist目录下的内容放在`/var/www/html/web`目录下,然后通过`http://yourdomain.com/web`访问。 如果服务器配置无法改变,并且必须将资源放在服务器根目录下的`web`目录中,则构建时配置publicPath为`/web/`即可。 总结:通过配置`publicPath`为`/web/`解决资源路径问题。 相关问题: 1. 如何配置Vue项目的publicPath? 2. Vue打包后静态资源路径错误有哪些常见原因? 3. 如何部署Vue项目到子路径?</think>### Vue打包后路径添加`web/`导致static资源找到的解决方案 #### 问题分析 当在Vue项目中添加`web/`作为基础路径后,打包生成的静态资源引用路径会变为`/web/static/...`,但实际文件可能仍位于`dist/static/`目录下。这导致资源加载失败,常见报错如: ```bash GET http://yourdomain.com/web/static/js/app.xxx.js 404 (Not Found) ``` 根本原因是构建路径与部署路径匹配[^2][^4]。 --- ### 解决方案 通过修改Vue配置调整资源路径,以下是详细步骤: #### 1. 配置`vue.config.js`(核心方案) 在项目根目录创建/修改`vue.config.js`文件: ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/web/' // 生产环境路径 : '/', // 开发环境路径 // 关键:修正静态资源路径 assetsDir: 'static', indexPath: 'index.html', // 可选:输出路径设置 outputDir: 'dist' } ``` - **`publicPath`**: 指定基础URL,使资源引用变为`/web/static/...` - **`assetsDir`**: 将静态资源统一放入`static`子目录[^4] #### 2. 调整资源引用方式 在代码中引用静态资源时: ```vue <!-- 正确方式:使用相对路径 --> <img src="./assets/logo.png"> <!-- 错误方式:绝对路径会导致404 --> <img src="/static/logo.png"> ``` #### 3. 部署服务器配置示例 以Nginx为例,添加重写规则: ```nginx server { location /web { alias /your/project/path/dist; # 指向实际打包目录 try_files $uri $uri/ /web/index.html; } } ``` #### 4. 检查构建结果 构建后验证`dist`目录结构应包含正确路径: ``` dist/ ├── web/ │ ├── static/ │ │ ├── js/ │ │ ├── css/ │ ├── index.html # 资源引用为 /web/static/... ``` --- ### 补充建议 1. **路径检查工具** 使用`vue inspect > output.js`检查最终webpack配置 2. **历史版本兼容** 老项目需检查`config/index.js`中的`assetsPublicPath`: ```javascript build: { assetsPublicPath: '/web/' } ``` 3. **图片路径处理** 将图片从`static`移至`src/assets`,使用webpack解析路径[^3][^4] > **关键原理**:通过`publicPath`和`assetsDir`的组合,将物理路径`dist/static/`映射到逻辑路径`/web/static/`,解决路径匹配问题[^1][^4]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值