vue项目打包之后图片路径由http://localhost:8080/day.png变为http://localhost:8080/day.0348ed.png怎么解决
时间: 2023-10-07 11:14:07 浏览: 31
这是因为在打包过程中,webpack 会为文件名添加一段 hash 值,以便于缓存。如果你使用了相对路径引入图片,那么打包后的路径就会发生变化。解决方法有两种:
1. 使用绝对路径引入图片,比如使用 `/static/day.png` 而不是 `./day.png`。
2. 在 `vue.config.js` 中配置 `assetsDir` 选项,将静态资源目录的路径设置为相对路径:
```javascript
module.exports = {
publicPath: '',
assetsDir: './'
}
```
这样打包后的图片路径就会与源代码中的路径保持一致。
相关问题
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 地址。