开发时tabbar图片资源访问失败

运行项目后展示为：

 切换tabbar后变为了：

 先说错误原因：

在项目中mainfest.json中配置了：

　　路由模式为history，并把base路径设置为了相对路径：

 如何修复：

将相对路径改为绝对路径或者直接暂时不设置base路径就可以显示正常了

显示正常：

接下来解释原因：

开发环境中为什么不能设置为./ ？

在开发环境里，publicPath不能设置为./，主要和 Vue CLI 开发服务器的工作机制以及资源加载方式有关。

1. 开发服务器采用绝对路径加载资源

Vue CLI 的开发服务器（也就是 webpack-dev-server）默认会把资源路径当作绝对路径来处理。举例说明：

• 当publicPath设为/时，开发服务器会将资源加载地址映射为http://localhost:8080/static/js/app.js。
• 若把publicPath设为./，资源路径就会变成相对路径，像./static/js/app.js。然而，开发服务器并不支持这种相对路径的解析方式，这就会造成资源加载失败。

2. 热更新（HMR）依赖绝对路径

开发环境中的热更新功能依靠 WebSocket 和绝对路径来推送更新。要是使用相对路径./，会出现以下问题：

• 客户端无法准确连接到 WebSocket 服务器，比如ws://localhost:8080/sockjs-node。
• 热更新的补丁文件也不能通过相对路径正确加载。

3. 生产环境与开发环境的差异

环境	publicPath	资源加载方式	示例
开发环境	/	绝对路径，由开发服务器直接提供	http://localhost:8080/js/app.js
生产环境	./	相对路径，相对于 index.html 文件	./js/app.js

4. 错误案例分析

假设index.html中有这样的资源引用：

 

html

<script src="/js/app.js"></script>

• 当publicPath为/时，开发服务器会把它正确解析为http://localhost:8080/js/app.js。
• 当publicPath为./时，浏览器会尝试加载http://localhost:8080/js/js/app.js，这显然是错误的路径。

5. 正确的配置方式

建议按照环境来配置publicPath，示例如下：

 

javascript

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
}

这样配置的好处是：

• 在开发环境中，使用绝对路径/，保证热更新和资源加载正常。
• 在生产环境中，使用相对路径./，适配打包后的文件结构。

总结

开发环境之所以不能使用./，是因为：

1. 开发服务器只支持绝对路径的资源映射。
2. 热更新机制依赖绝对路径来实现实时更新。
3. 相对路径会让开发服务器错误地嵌套资源路径。

 

只有在生产环境中，由于资源是基于文件系统进行相对加载的，使用./才是合适的。