uni-app本地运行微笑小程序时 src下的assets会丢失

uni-app本地运行微笑小程序时 src下的assets会丢失

操作步骤:

预期结果:

  • 编译运行后,微信小程序里面能看到assets文件夹

实际结果:

  • 编译运行后,微信小程序里面assets文件夹丢失了

bug描述:

图片

Image 1 Image 2

项目信息

项目信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 19045.3930
HBuilderX类型 正式
HBuilderX版本号 3.99
第三方开发者工具版本号 1.06.2401020
基础库版本号 3.x
项目创建方式 HBuilderX
4 回复

生成的小程序包,src里面只有request, utils, views这三个文件夹,其余文件夹都没有生成,但我的项目src里面,是还有images,scss这两个文件夹


应该就是uniapp或者vite本身的摇树功能,认为这些文件没有引入就去除掉了。但是图片我是引入了的H5上显示没有问题,就小程序上有问题,因此直接通过import x from xxx图片地址;这样H5与小程序都能正常显示

可以参考下文档,如确认是框架问题,请提供下复现工程

在 uni-app 开发中,如果你在本地运行小程序时发现 src/assets 目录下的静态资源(如图片、字体等)丢失,可能是以下原因导致的。以下是一些常见的解决方案:


1. 检查路径是否正确

确保在代码中引用 assets 目录下的资源时,路径是正确的。例如:

<image src="/static/logo.png"></image>

注意:src/assets 中的资源在编译后会放到 dist/dev/mp-weixin/static 下(以微信小程序为例),所以引用路径应为 /static/xxx


2. 检查文件是否被正确编译

  • 确保 src/assets 目录下的文件没有被错误地排除在编译之外。
  • 检查 vue.config.jsuni.scss 中是否有配置错误,导致资源未被正确处理。

3. 检查 HBuilderX 的配置

如果你使用的是 HBuilderX,确保项目配置正确:

  • 打开 manifest.json,检查 源码视图 中的配置是否正确。
  • 确保 uni-app 编译模式为 Vue2Vue3,与你的项目匹配。

4. 清理缓存并重新编译

有时缓存可能导致资源丢失,尝试以下操作:

  • 删除 dist 目录。
  • 在 HBuilderX 中点击 运行 -> 运行到小程序模拟器 -> 微信开发者工具,重新编译项目。

5. 检查微信开发者工具的配置

  • 确保微信开发者工具的 详情 -> 本地设置 中,勾选了 ES6 转 ES5上传时压缩代码
  • 如果资源仍未加载,尝试在微信开发者工具中点击 编译 -> 重新编译

6. 静态资源大小限制

微信小程序对静态资源有大小限制(单文件不超过 2MB)。如果资源过大,可能会导致无法加载。你可以尝试压缩资源或使用网络资源替代。


7. 检查项目结构

确保项目结构符合 uni-app 的规范。例如:

project
├── src
   ├── assets
      └── logo.png
   ├── pages
   └── App.vue
├── static
└── ...

8. 使用网络资源

如果本地资源问题无法解决,可以尝试将资源上传到服务器,然后通过网络链接引用:

<image src="https://example.com/logo.png"></image>
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!