uni-app vue3版本下，分包使用static在微信小程序中路径被识别为根目录下static

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app vue3版本下，分包使用static在微信小程序中路径被识别为根目录下static

操作步骤：

  1. 使用vue3版本
  2. 使用分包，在分包下 创建 static 文件夹
  3. 在分包页面引入 第二步 创建的 static 下面的图片 (…/static/xx.png)

预期结果：

正常显示图片 路径为 …/static/xx.png

实际结果：

图片未显示 路径为 /static/xx.png

bug描述：

vue3版本下 在分包 使用 图片 路径为 …/static (分包下面的 static) , 微信小程序会把路径识别为 /staic
vue2 版本都正常
vue3 版本 h5正常 微信小程序异常 app未测试

Image 1 Image 2

开发环境、版本号 和 项目创建方式

项目 信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 3.7.9
第三方开发者工具版本号 1.06.2303220
基础库版本号 2.31.0
项目创建方式 HBuilderX

Harmonyos Next教程
13 回复

有没有人遇到啊


uniapp 都是直接写/static/xx.png

回复 9***@qq.com: 可以使用分包静态文件的，不会打包到主包

我也遇到了，一直在等官方更新

感谢反馈，后续修复，先使用绝对路径 “/package-a/static/xxx.png”

v3 下面， 动态的引入@/分包路径，还是不行， 静态的可以

什么时候修复这个啊

这个bug好久好久了

等待修复

/**

  • 获得当前组件下的分包资源
  • @param p static下的父级路径
  • @param avatar 文件名，或相对分包static的相对路径名
    */
    export function _staticPath (p = ‘’, avatar){
    let path = /pages-A/static${p}/${avatar?avatar:'def.svg'};
    // 兼容h5
    // #ifdef H5
    path = /@${path};
    // #endif

return path;
} 每个分包下做一个这样的函数，需要用分包私有static图片资源的就用函数获取，函数内进行h5兼容处理，默认是微信小程序分包资源获取逻辑。 <image :src="_staticPath('','details.png')" />

遇到了，vue3，app和微信小程序都有这个问题，vue2正常

这v3下的路径引入咋还是没修复呢

在uni-app中使用Vue 3版本进行开发时，如果遇到分包加载且static资源路径在微信小程序中被错误识别为根目录下的static，这通常是由于资源路径配置不当引起的。为了确保资源能够正确加载，我们需要调整路径配置，并正确引用资源。

以下是一个示例，展示如何在uni-app中配置分包并使用static资源：

1. 项目结构

假设你的项目结构如下：

/project-root
  /pages
    /index
      index.vue
  /static
    /images
      logo.png
  /subpackages
    /mypackage
      /pages
        mypage.vue
      /static
        /images
          mypackage_logo.png
  pages.json
  manifest.json

2. 配置分包

在pages.json中配置分包：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "subPackages": [
    {
      "root": "subpackages/mypackage",
      "pages": [
        {
          "path": "pages/mypage",
          "style": {
            "navigationBarTitleText": "分包页面"
          }
        }
      ]
    }
  ]
}

3. 引用资源

主包中的资源引用

在pages/index/index.vue中引用static目录下的资源：

<template>
  <image src="/static/images/logo.png" alt="Logo"></image>
</template>

分包中的资源引用

在subpackages/mypackage/pages/mypage.vue中引用分包内的static资源：

<template>
  <image src="../../static/images/mypackage_logo.png" alt="MyPackage Logo"></image>
</template>

注意，分包内的资源路径是相对于分包根目录的，因此使用../../static/images/mypackage_logo.png来引用。

4. 构建与预览

确保项目配置正确后，使用HBuilderX或命令行工具进行构建，并在微信开发者工具中预览。检查资源是否能够正确加载。

通过上述配置和路径引用方式，可以确保在uni-app中使用Vue 3版本进行分包开发时，static资源能够正确加载，避免路径被错误识别为根目录下的static。在实际开发中，根据项目的具体需求调整路径和配置。

回到顶部