uni-app vue3使用vite编译微信小程序缺少分包静态资源

uni-app vue3使用vite编译微信小程序缺少分包静态资源

开发环境 版本号 项目创建方式
Windows Windows 10 HBuilderX

操作步骤：

使用HBuilderX3.3+版本创建vue3项目，创建分包，在分包内添加静态资源目录static，在代码中引用该目录下的图片，运行到微信小程序，缺少该目录

预期结果：

该静态资源目录应该被复制到分包目录中

实际结果：

分包目录中没有静态资源目录

bug描述：

HBuilderX创建Vue3项目，使用vite编译，运行到微信小程序，分包中的static目录不会复制到小程序分包目录下


更多关于uni-app vue3使用vite编译微信小程序缺少分包静态资源的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

同样遇到了装个问题

更多关于uni-app vue3使用vite编译微信小程序缺少分包静态资源的实战教程也可以访问 https://www.itying.com/category-93-b0.html


升级一下hx或cli试试

升级之后问题更严重了

差量编译 组件没有被编译进去

回复 9***@qq.com: cli 修复了，HX 后续马上会发一版

这是一个已知的编译问题，主要原因是Vite构建工具在处理分包静态资源时与uni-app的编译流程存在兼容性差异。

问题原因： Vite在构建时默认不会将分包内的static目录复制到最终的小程序分包目录中，这与webpack的处理方式不同。

临时解决方案：

  1. 手动复制静态资源： 在项目根目录创建copy-static.js脚本：

    const fs = require('fs-extra');
const path = require('path');

// 复制分包static目录到dist对应位置
const subPackages = ['subpackage1', 'subpackage2']; // 你的分包目录名

subPackages.forEach(pkg => {
  const source = path.join(__dirname, pkg, 'static');
  const target = path.join(__dirname, 'dist/dev/mp-weixin', pkg, 'static');
  
  if (fs.existsSync(source)) {
    fs.copySync(source, target, { overwrite: true });
    console.log(`已复制 ${pkg}/static 到编译目录`);
  }
});

    在package.json中添加脚本：

    "scripts": {
  "copy-static": "node copy-static.js",
  "dev:mp-weixin": "uni build -p mp-weixin && npm run copy-static"
}

  2. 使用相对路径引用： 将图片放在分包目录外（如主包static），使用相对路径引用：

    <image src="../../static/subpackage/image.png"></image>

  3. 配置vite插件： 在vite.config.js中添加自定义复制逻辑：

    import { copy } from 'fs-extra';

export default defineConfig({
  plugins: [
    {
      name: 'copy-subpackage-static',
      closeBundle() {
        // 构建完成后复制静态资源
      }
    }
  ]
});
回到顶部