解决vite+vue3项目打包后图片不显示或者请求路径多了一个undefined问题
更新时间：2025年05月06日 10:50:59 作者：Lysun001
这篇文章主要介绍了解决vite+vue3项目打包后图片不显示或者请求路径多了一个undefined问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
我们先来看一个简单的例子
我已经事先在本地构建了一个 express 服务器，端口是 3000，images 里面是有文件资源的，
这是代码
此时，当我们没有打包，npm run dev 启动时，两张图片都是正常加载的
如果我们是把项目打包
然后在掉到 express 服务器里面去时，我们会发现，只显示了一张图片，另外一张图片的地址前面是 undefined
这一看就是 import.meta.env.VITE_APP_URL 惹的祸，然后我在 vite 的官网看到了这个
这里表示我们的 .env.development 文件，在打包的时候是不会被构建进去的，所以当我们打包后，.env.development 里面用到的路径就出错了
解决办法
我们把 .env.development 文件名改为 .env.local 或者直接是 .env 就好了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue中使用this.$store或者是$route一直报错的解决
今天小编就为大家分享一篇在Vue中使用this.$store或者是$route一直报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue+koa2搭建mock数据环境的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
本篇文章主要介绍了vue.js获取数据库数据实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要给大家介绍关于前端Vue3父子组件传参有关sync修饰符的用法详细解析，有需要的朋友可以借鉴参考下，希望能够有所帮助2021-09-09
在实际项目开发中,几乎每个组件中都会用到 axios 发起数据请求,下面这篇文章主要给大家总结介绍了关于Vue3全局配置axios的两种方式,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要向大家分享的是Vue 中插槽的使用总结，包括内容有默认插槽、具名插槽、作用域插槽等内容，具有一定的参考价值，需要的小伙伴可以参考一下2022-04-04
这篇文章主要介绍了vue 同局域网访问不到的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了Vue.js数字输入框组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要为大家介绍了Vue之mixin混入，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
Vue3.x如何操作v-html指令中HTML的DOM和样式
在 Vue3.x 中,v-html 指令用于将 HTML 字符串渲染为真实的 DOM 元素,下面我们来看看具体如何操作v-html指令中HTML的DOM和样式吧2025-04-04
最新评论