使用dcloudio/uni-preset-vue打包H5根目录添加静态资源

在Uni-app中使用dcloudio/uni-preset-vue打包H5时，默认情况下无法直接将静态资源放置在根目录，这是由于Uni-app的构建机制所限制的。

如果需要将静态资源放置在根目录，考虑使用一个辅助工具来在打包完成后，将静态资源文件复制到根目录。

1. 在根目录下创建一个名为build的文件夹，然后在其中创建一个名为copyStatic.js的文件
2. 安装 copy-dir 模块

npm install copy-dir --save-dev

3. 在copyStatic.js文件中，添加以下代码：

const fs = require('fs');
const path = require('path');
const copydir = require('copy-dir');

// 静态资源目录路径
const staticPath = path.resolve(__dirname, '../static');
// 目标输出路径，这里设置为根目录下
const outputPath = path.resolve(__dirname, '../');

// 复制静态资源到根目录
copydir.sync(staticPath, outputPath, {
  utimes: true, // 使用原始文件的创建/修改时间
  mode: true, // 使用原始文件的模式
  cover: true, // 覆盖目标文件夹中的现有文件
});

// 遍历目标输出路径下的文件，删除static目录及其子文件夹。（如保留源文件可删除该方法）
const removeStaticDir = dir => {
  if (fs.existsSync(dir)) {
    const files = fs.readdirSync(dir);
    files.forEach(file => {
      const currentPath = path.join(dir, file);
      if (fs.statSync(currentPath).isDirectory()) {
        removeStaticDir(currentPath);
      } else {
        fs.unlinkSync(currentPath);
      }
    });
    fs.rmdirSync(dir);
  }
};

removeStaticDir(staticPath);

console.log('静态资源已成功放置在根目录中！');

4.打开package.json文件，在scripts字段中添加以下脚本：

"scripts": {
  "build:h5": "uni-app-cli-service build --mode production && node build/copyStatic.js"
},

5.运行以下命令进行打包：

npm run build:h5