moobbit
moobbit
  • 发布:2026-01-05 11:20
  • 更新:2026-01-06 13:52
  • 阅读:116

[feat] 增加 build.assetsInlineLimit 对微信小程序端的支持

分类:uni-app

需求背景

目前 build.assetsInlineLimit 仅 h5 支持,需要增加对微信小程序端的支持

需求目的

开发者可以通过 vite 插件统一对资源路径进行管理,例如:env.a 环境使用 cdn1,env.b 环境使用 cdn2

目前问题

// vite.config.ts  

import VitePluginUniCdn from '@cnguu/vite-plugin-uni-cdn'  
import Uni from '@dcloudio/vite-plugin-uni'  
import { defineConfig } from 'vite'  

export default defineConfig({  
  plugins: [  
    VitePluginUniCdn({  
      cdn: 'https://cdn.jsdelivr.net/gh/cnguu/vite-plugin-uni-cdn@main/packages/playground/src/static/cdn',  
      sourceDir: 'src/static/cdn',  
    }),  
    Uni(),  
  ],  
  build: {  
    // 微信端仍然会被转换成 base64,导致插件无法找到路径进行替换  
    assetsInlineLimit: 0,  
  },  
})
<script setup lang="ts">  
// index.vue  
</script>  

<template>  
  <view class="bg-image" />  
</template>  

<style lang="scss">  
@import "index";  
</style>
// index.scss  
.bg-image {  
  width: 200rpx;  
  height: 200rpx;  
  background-image: url("/static/cdn/3.png");  
  background-position: center;  
  background-repeat: no-repeat;  
}
2026-01-05 11:20 负责人:无 分享
已邀请:
moobbit

moobbit (作者) - 超级牛马

已通过postcss替换

  • moobbit (作者)

    hbx项目可以,cli项目不行

    2026-01-06 14:36

Ask小助手

Ask小助手

该问题请在专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

根据知识库内容,build.assetsInlineLimit 配置项目前确实仅支持 H5 平台,微信小程序端不支持该配置(参考vite-config-1文档)。

微信小程序对资源处理有其特殊性:

  • 小程序不支持 CSS 中直接引用本地文件(包括背景图),必须转为 base64 或使用网络路径
  • uni-app 在编译到小程序时,会自动将小于 40KB 的图片转为 base64(参考背景图片文档

解决方案建议:

  1. 使用网络路径替代本地路径,如通过 VitePluginUniCdn 插件管理 CDN 资源
  2. 对于必须使用本地资源的情况,可考虑在 vite 配置中添加自定义插件处理资源路径
  3. 关注 uni-app 官方更新,未来版本可能会扩展该配置项的支持范围

当前可通过修改源码方式实现:在 vite.config.js 中添加自定义插件,在构建过程中修改资源路径。详细实现可参考插件市场相关资源:https://ext.dcloud.net.cn/search?q=asset+path

内容为 AI 生成,仅供参考

要回复问题请先登录注册