uni-app + vue3.x + ts 项目构建分包时，发行小程序独立包图片资源加载失败

在构建 uni-app + Vue 3.x + TypeScript 项目时，如果发行小程序独立包时图片资源加载失败，这通常是由于资源路径处理不当或配置错误导致的。以下是一些可能的解决方案和相关的代码示例，帮助你定位并解决问题。

1. 确保资源路径正确

确保你的图片资源路径是正确的，特别是在分包配置中。使用相对路径或别名路径时，要确保它们在编译后仍然有效。

// 在组件中引用图片
<template>
  <image :src="require('@/assets/images/logo.png')" />
</template>

2. 配置 pages.json

在 pages.json 中正确配置分包路径和依赖关系。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    // 其他页面...
  ],
  "subPackages": [
    {
      "root": "pages/sub/",
      "pages": [
        {
          "path": "subPage/subPage",
          "style": {
            "navigationBarTitleText": "分包页面"
          }
        }
      ]
    }
  ]
}

3. 配置 webpack 或 vite

如果你使用的是 webpack 或 vite，确保它们能够正确处理静态资源。对于 uni-app，通常不需要手动配置 webpack，但你可以通过修改 vue.config.js 或 vite.config.js（如果适用）来调整资源处理。

4. 检查 static 文件夹

确保你的图片资源放在正确的静态文件夹中，比如 static 文件夹（对于某些小程序平台）。

project-root/
├── static/
│   └── images/
│       └── logo.png
└── pages/
    └── ...

5. 使用绝对路径（谨慎使用）

虽然不推荐，但在某些情况下，使用绝对路径可能有助于解决问题。注意，这可能导致跨平台兼容性问题。

// 绝对路径（谨慎使用）
<template>
  <image :src="'/static/images/logo.png'" />
</template>

6. 清理和重建项目

有时候，简单的清理和重建项目可以解决缓存或编译错误导致的问题。

# 清理并重建
npm run clean  # 如果有这个脚本
npm run build

总结

确保你的资源路径配置正确，检查 pages.json 中的分包配置，以及可能需要的构建工具配置。如果问题依然存在，考虑检查网络请求日志，看是否有权限或路径解析错误。希望这些代码示例和步骤能帮助你解决小程序独立包中图片资源加载失败的问题。