vue项目打包之后图片路径由http://localhost:8080/day.png变为http://localhost:8080/day.0348ed.png怎么解决
时间: 2023-10-07 09:09:01 浏览: 137
解决vue项目打包后提示图片文件路径错误的问题
这是因为在打包后,webpack 会对静态资源进行哈希值处理,以便于缓存。解决方法有两种:
1. 使用相对路径
在模板中使用相对路径引入图片,例如:
```html
<img src="../assets/day.png">
```
这样打包后就不会加上哈希值了。
2. 配置webpack
在 `vue.config.js` 中配置 `publicPath` 和 `filenameHashing`,例如:
```js
module.exports = {
publicPath: './',
filenameHashing: false
}
```
其中,`publicPath` 指定了打包后静态资源的根路径,`./` 代表相对路径;`filenameHashing` 取消了哈希值处理。这样打包后图片路径就不会加上哈希值了。
阅读全文