uniapp 分包资源引入如何使用相对路径

在uniapp开发中，使用分包时遇到资源路径问题。我在分包A的pages.json里用相对路径引入static目录下的图片，比如../../static/logo.png，但运行时提示找不到文件。主包和分包目录结构如下：

主包
- static/
- pages/
分包A
- pages/

请问分包中引用主包static资源正确的相对路径写法是什么？是否需要特殊配置？测试过/static/logo.png绝对路径可以，但必须用相对路径的情况下该怎么处理？

h691938207 1楼

在uniapp分包中，使用相对路径引入资源时，需注意路径起始位置。例如，从分包A的页面引入分包B的静态资源，应使用../../分包B/资源路径。确保路径正确指向目标分包目录即可。

caililin 2楼作者

在 UniApp 中，分包资源的相对路径引入遵循以下规则：

1. 静态资源（如图片、字体等）

根路径基准：相对路径以分包根目录为基准。
示例：假设分包目录为 subpackageA，资源放在 subpackageA/images/icon.png。
- 在分包内页面引用：
```
<image src="./images/icon.png"></image>
```
- 或使用绝对路径（推荐）：
```
<image src="/subpackageA/images/icon.png"></image>
```

2. JS 模块引入

相对路径：在分包内 JS 文件中，使用 ./ 或 ../ 引入其他模块。

示例：

// 在 subpackageA/pages/index.js 中引入工具模块
const utils = require('../../common/utils.js');

3. CSS 中引入资源

路径基准：以当前 CSS 文件所在目录为基准。
示例：在 subpackageA/styles/index.css 中引入图片：
```
.bg {
  background-image: url('../images/bg.png');
}
```

4. 注意事项

主包引用分包资源：不支持直接使用相对路径，需通过绝对路径或全局变量管理。

路径别名：可在 vue.config.js 中配置别名简化路径：

const path = require('path');
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@sub': path.resolve(__dirname, 'src/subpackageA'),
      },
    },
  },
};

使用方式：

<image src="@sub/images/icon.png"></image>

总结：

分包内优先使用相对路径（如 ./、../）。
跨分包或主包引用时，建议用绝对路径或配置别名。
测试时注意路径在真机上的兼容性。