H5端访问不到分包的static文件

[xiaohe0601]

// 目录结构

src
├─packages
│  ├─pkg-a
│  │  ├─static
│  │  │  ├─image.png
├─pages

// pages.json

{
  "subPackages": [{
    "root": "packages/pkg-a",
    "pages": [
      // ...
    ]
  }]
}

<image src="/packages/pkg-a/static/image.png"></image>

微信小程序端dev和build模式都可以正常访问到，但是H5端dev模式下找不到文件，build会报错

[vite]: Rollup failed to resolve import "/packages/pkg-a/static/image.png" from "xxx/packages/pkg-a/pages/index.vue?vue&type=script&setup=true&lang.ts".

版本信息

• uniapp：3.0.0-alpha-4010920240607001
• vue：3.4.27

[GRCmade]

暂时没有复现，你可以说的详细一点吗，比如具体是哪个页面访问分包图片之类的

[xiaohe0601]

uni-preset-vue-vite-ts.zip

@GRCmade /packages/pkg-a/index 页面，H5访问会报错，微信小程序正常

[xiaohe0601]

经测试，从 3.0.0-alpha-4020120240617001 开始，微信小程序端编译时也会报错

[vite]: Rollup failed to resolve import "/packages/pkg-a/static/image.png" from "***/uni-preset-vue-vite-ts/src/packages/pkg-a/index.vue".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

[GRCmade]

图片的路径加一个@就好了

[xiaohe0601]

@GRCmade 直接使用 image 组件没有问题，如果是自定义组件请问应该怎么处理呢

src/components/AppImage.vue

<template>
  <image :src="props.src"></image>
</template>

<script setup lang="ts">
const props = defineProps<{
  src: string;
}>()
</script>

src/packages/pkg-a/index.vue

<template>
  <view class="content">
    <!-- 无法正常显示 -->
    <app-image src="@/packages/pkg-a/static/image.png"></app-image>

    <!-- 可以正常显示 -->
    <image src="@/packages/pkg-a/static/image.png"></image>
  </view>
</template>

<script setup lang="ts">
import AppImage from "@/components/AppImage.vue";
</script>

[jdz321]

@xiaohe0601 在vite config中添加如下配置：

const assetURLTagConfig = {
  tags: {
    's-icon': ['src'],
    'c-icon': ['src'],
  },
}

// uni plugin
uni({
  vueOptions: {
    template: {
      transformAssetUrls: assetURLTagConfig,
    }
  }
})

@see: https://github.com/dcloudio/uni-app/blob/next/packages/vite-plugin-uni/src/vue/options.ts#L149