vue项目打包之后图片路径由http://localhost:8080/day.png变为http://localhost:8080/day.0348ed.png怎么解决
时间: 2023-10-07 10:09:02 浏览: 39
这是因为 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" />
```
注意:手动引用这些文件时,你需要确保这些文件会被正确地打包到输出目录中。
相关问题
vue请求本地路径GET http://localhost:8080/.... 404 (Not Found)
这个错误通常是因为你的请求路径不正确或者你的本地服务器没有正确配置。你可以尝试以下几个步骤来解决这个问题:
1. 确认请求路径是否正确,可以通过打印请求路径来检查。确保请求路径与本地服务器的路径保持一致。
2. 确认本地服务器是否正确配置,你需要确保你的本地服务器能够正确识别你的请求。例如,在使用Vue.js时,你需要在vue.config.js文件中配置你的代理,以便在本地服务器上正确识别请求。
3. 确认资源是否存在,如果你请求的是一个文件,你需要确保该文件存在于你的本地服务器中,并且路径正确。
如果以上步骤都没有解决问题,你可以尝试使用浏览器的开发者工具来查看更多的错误信息,这有助于你更好地了解出错的原因。
怎样将vue3项目默认启动地址http://127.0.0.1:5173/改成http://localhost:8080/
在 Vue 3 项目中,可以通过修改 Vite 的配置来将默认启动地址从 `http://127.0.0.1:5173/` 改为 `http://localhost:8080/`。具体操作步骤如下:
1. 在项目根目录下创建一个 `vite.config.js` 文件。
2. 在 `vite.config.js` 文件中,配置 `server` 选项,例如:
```js
module.exports = {
server: {
host: 'localhost',
port: 8080
}
}
```
在上面的配置中,`host` 选项表示要监听的主机名,这里我们将其设置为 `localhost`;`port` 选项表示要启动的端口号,这里我们将其设置为 `8080`。
3. 保存 `vite.config.js` 文件。然后在控制台中运行以下命令启动项目:
```bash
npm run dev
```
或者
```bash
yarn dev
```
这样,项目就会在 `http://localhost:8080/` 上启动了。
需要注意的是,如果你想要完全禁用 IPv6 地址,可以在 `server` 选项中添加一个 `https` 选项,例如:
```js
module.exports = {
server: {
host: 'localhost',
port: 8080,
https: false
}
}
```
这样,Vite 就会禁用 IPv6 地址,只使用 IPv4 地址。