在uni-app中调整Vite Vue3项目的H5打包目录结构

在使用uni-app开发H5应用时，我们经常会遇到需要自定义打包输出目录结构的需求。本文将详细介绍如何通过配置和脚本调整Vite Vue3项目的H5打包输出目录。

问题背景

默认情况下，使用Vite构建的uni-app项目在打包H5时，会生成如下的目录结构：

dist/
  build/
    h5/
      assets/
      static/
      index.html

但很多开发者希望直接将打包内容放在dist根目录下，即：

dist/
  assets/
  static/
  index.html

解决方案

方法一：修改Vite配置（不推荐）

最初尝试通过修改vite.config.js中的build.rollupOptions.output.dir配置为'./dist'，但这种方法会导致目录结构变得混乱，不推荐使用。

方法二：使用构建后脚本（推荐）

更可靠的方法是在构建完成后执行一个简单的脚本，将文件移动到正确的位置。

Windows系统脚本

在package.json中添加以下脚本：

{
  "scripts": {
    "postbuild:h5": "move dist\\build\\h5\\* dist && rmdir /s /q dist\\build"
  }
}

Linux/Mac系统脚本

{
  "scripts": {
    "postbuild:h5": "mv dist/build/h5/* dist && rm -rf dist/build"
  }
}

工作原理

1. postbuild:h5是一个特殊的npm脚本钩子，会在build:h5命令执行完成后自动运行
2. 脚本首先将h5目录下的所有内容移动到dist根目录
3. 然后删除空的build目录

注意事项

1. 确保脚本与你的操作系统兼容
2. 如果使用CI/CD流程，请根据运行环境选择正确的脚本
3. 这种方法只适用于H5平台，不影响其他平台的打包

总结

通过简单的构建后脚本，我们可以轻松调整uni-app项目的H5打包输出目录结构，而无需修改复杂的构建配置。这种方法既保持了构建过程的稳定性，又满足了项目对目录结构的特殊需求。