uni-app 4.07HBX web端打包后 子包引入图片路径不正确

在 uni-app 项目中，打包后子包引入图片路径不正确的问题，通常是由于路径引用方式不当或打包配置问题导致的。以下是一些可能的解决方案：

1. 使用正确的图片路径

确保在代码中引用图片时使用正确的路径。在 uni-app 中，推荐使用相对路径或 @ 别名来引用图片。

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

2. 检查 manifest.json 配置

在 manifest.json 中，确保 h5 配置项中的 publicPath 设置正确。publicPath 是打包后的静态资源路径前缀。

{
  "h5": {
    "publicPath": "./"
  }
}

3. 使用 require 动态引入图片

如果图片路径需要在运行时动态生成，可以使用 require 来引入图片。

<template>
  <image :src="imagePath"></image>
</template>

<script>
export default {
  data() {
    return {
      imagePath: require('@/static/logo.png')
    }
  }
}
</script>

4. 检查子包配置

如果项目中有子包，确保子包的配置正确。在 pages.json 中，子包的路径配置应正确无误。

{
  "subPackages": [
    {
      "root": "subPackageA",
      "pages": [
        {
          "path": "index",
          "style": {}
        }
      ]
    }
  ]
}

5. 打包后手动检查路径

打包后，手动检查生成的 dist 目录中的文件路径，确保图片资源路径正确。如果路径不正确，可以调整 publicPath 或图片引用方式。

6. 使用 uni-app 提供的图片资源管理

uni-app 提供了 uni.chooseImage 等 API 来管理图片资源，确保图片资源在打包后能够正确引用。

7. 清除缓存并重新打包

有时缓存可能导致打包路径不正确，尝试清除 node_modules 和 dist 目录，然后重新安装依赖并打包。

rm -rf node_modules
rm -rf dist
npm install
npm run build

8. 使用 webpack 配置

如果以上方法无效，可以尝试通过 webpack 配置来调整静态资源的路径。在 vue.config.js 中添加 publicPath 配置。

module.exports = {
  publicPath: './'
}