uni-app vue3+vite创建cli的app项目，未打包前基座和本地运行图片正常加载，打正式包后图片无法加载报404。

uni-app vue3+vite创建cli的app项目，未打包前基座和本地运行图片正常加载，打正式包后图片无法加载报404。

测试过的手机

任何一个手机

示例代码

创建vue3+vite的cli工程自己试试，uni直接创建的工程也是的。我uni的vue2用了好几年了，vue3也用了大半年了，用你们这个配置真是能吐血。自测好再发布行不行。我的群里不止我一个出这个问题，别的也说这个问题，只能又改成vue2了。

操作步骤

创建vue3+vite的cli工程自己试试，uni直接创建的工程也是的。我uni的vue2用了好几年了，vue3也用了大半年了，用你们这个配置真是能吐血。自测好再发布行不行。我的群里不止我一个出这个问题，别的也说这个问题，只能又改成vue2了。

预期结果

尽快测试修复

实际结果

  1. 图片放在assets下app打包一直提示路径问题，打基座就没问题。
  2. 图片放在staic下打包后static丢失。图片无法加载

bug描述

vue3+vite创建cli的app项目，未打包前基座和本地运行图片正常加载，打正式报后图片无法加载报404。 项目刚创建好，不进行任何修改，打正式包就出现这个问题，static文件夹打包后会丢失，图片放在assets下图片，打基座和本地运行正常，打正式环境就提示图片路径错误，修改vite.config的alias，根本不起作用，麻烦自己测一下再说vue3+vite能用了好不好，真是难用，超级难用。

信息项 信息值
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 window10
手机系统 全部
手机厂商 华为
页面类型 vue
打包方式 云端
项目创建方式 CLI
CLI版本号 4.5.9

更多关于uni-app vue3+vite创建cli的app项目，未打包前基座和本地运行图片正常加载，打正式包后图片无法加载报404。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

请问，你是如何加载静态资源的 ？我用vite的时候在js(ts) 使用静态资源，也不行。后来我仔细看了看vite 官网，问题终于解决了。某一个对象的属性 { icon: new URL(’…/assets/approval_logo4.png’, import.meta.url).href }

更多关于uni-app vue3+vite创建cli的app项目，未打包前基座和本地运行图片正常加载，打正式包后图片无法加载报404。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


本人的解决方案:https://blog.csdn.net/qq_43402051/article/details/127743203?spm=1001.2014.3001.5501

这是一个已知的Vite模式下静态资源打包路径问题。在uni-app Vue3 + Vite项目中，静态资源处理方式与Webpack模式不同。

解决方案：

  1. 对于static目录：

    • 确保图片放在src/static目录下
    • 引用时使用绝对路径：/static/image.png
    • 不要使用@/static或相对路径

  2. 对于assets目录：

    • Vite会将assets中的资源作为模块处理
    • 需要使用import导入：
      import logo from '@/assets/logo.png'
// 然后在模板中使用
<image :src="logo" />

  3. 修改vite.config.js（如需要）：

    import { defineConfig } from 'vite'
import uni from '[@dcloudio](/user/dcloudio)/vite-plugin-uni'

export default defineConfig({
  plugins: [uni()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})
回到顶部