vue项目打包之后图片路径由http://localhost:8080/day.png变为http://localhost:8080/day.0348ed.png怎么解决
时间: 2023-10-07 16:09:02 浏览: 198
解决vue项目打包后提示图片文件路径错误的问题
这是因为在打包时,webpack会对图片文件进行hash命名,以防止浏览器缓存。如果你使用了相对路径引用图片,那么图片路径就会发生变化。
解决方法有两种:
1. 使用绝对路径引用图片
在引用图片时,使用绝对路径可以避免hash命名带来的问题。可以使用`process.env.BASE_URL`来获取项目的根路径。例如:
```html
<img :src="`${process.env.BASE_URL}assets/images/day.png`">
```
2. 配置webpack的output属性
在`vue.config.js`文件中,添加如下代码:
```js
module.exports = {
// ...
configureWebpack: {
output: {
filename: '[name].[hash].js',
chunkFilename: '[name].[hash].js'
}
}
}
```
这样,webpack打包时就会对js文件和chunk文件进行hash命名,而不是图片文件。图片文件的文件名不会发生变化,也就不会出现路径错误的问题。
阅读全文