vue项目打包之后图片路径由http://localhost:8080/day.png变为http://localhost:8080/day.0348ed.png怎么解决
时间: 2023-10-07 17:09:02 浏览: 174
这是因为 Vue 在打包时使用了文件哈希值作为文件名的一部分,这样可以避免浏览器缓存的问题,确保新版本的文件能够被客户端正确请求。
如果你需要在代码中引用这些带哈希值的文件,可以使用 Webpack 提供的 `require` 或 `import` 语法来引用,例如:
```js
import logo from '@/assets/logo.png'
// 或者
const logo = require('@/assets/logo.png')
```
Webpack 会自动解析文件路径并替换成带哈希值的文件名,你可以放心使用。
如果你是手动引用这些文件,可以通过在文件名中去掉哈希值来解决:
```html
<!-- 在 Vue 模板中 -->
<img src="/day.png" alt="day" />
<!-- 在 HTML 中 -->
<img src="http://localhost:8080/day.png" alt="day" />
```
注意:手动引用这些文件时,你需要确保这些文件会被正确地打包到输出目录中。
阅读全文