common协议解决方案

因为某些插件需要将package.json的type属性修改为commonjs而导致第一种方法报错,即静态资源被HbuildX打包成通过require方式引入

  1. 创建一个mjs,我这里叫replaceStaticImages.mjs
    envConfig[isTestEnv].imgNetwork是我的图片服务域名
import fs from 'fs';
import path from 'path';
import { config as envConfig } from '../envConfig.mjs';

const targetDir = path.join(process.cwd(), 'unpackage', 'dist', 'build', 'mp-weixin');
if (!fs.existsSync(targetDir)) {
  console.error(`目录不存在: ${targetDir}`);
  process.exit(1);
}

// 根据当前运行的环境选择配置
const isTestEnv = process.env.NODE_ENV
// const imgNetwork = isTestEnv ? envConfig.test.imgNetwork : envConfig.production.imgNetwork;
const imgNetwork = envConfig[isTestEnv].imgNetwork;

// 定义替换规则:先处理 @/static/images,再处理 /static/images
const replaceRules = [
  {
    searchStr: '@/static/images',
    replaceStr: '/static/images'
  },
  {
    searchStr: '/static/images',
    replaceStr: imgNetwork + '/staticWx/images'
  }
];

// 替换文件中的字符串
function replaceInFiles(dir) {
  fs.readdirSync(dir).forEach(file => {
    const filePath = path.join(dir, file);
    const stat = fs.statSync(filePath);

    if (stat.isDirectory()) {
      replaceInFiles(filePath);
    } else if (stat.isFile()) {
      let content = fs.readFileSync(filePath, 'utf8');

      // 按顺序应用所有替换规则
      let hasReplacement = false;
      replaceRules.forEach(rule => {
        if (content.includes(rule.searchStr)) {
          content = content.replace(new RegExp(rule.searchStr, 'g'), rule.replaceStr);
          hasReplacement = true;
        }
      });

      // 如果有替换发生,则写入文件
      if (hasReplacement) {
        fs.writeFileSync(filePath, content, 'utf8');
      }
    }
  });
}

replaceInFiles(targetDir);
console.log('替换完成');

// 删除特定文件夹
function deleteSpecificFolders(dir) {
  const foldersToDelete = ['static/images', 'static/app'];
  foldersToDelete.forEach(folder => {
    const folderPath = path.join(dir, folder);
    if (fs.existsSync(folderPath)) {
      fs.rmSync(folderPath, { recursive: true, force: true });
      console.log(`删除文件夹: ${folderPath}`);
    }
  });
}

deleteSpecificFolders(targetDir);
console.log('删除完成');
  1. 创建命令
"wx:dev": "cross-env NODE_ENV=dev node buildConfig/replaceStaticImages.mjs",

打包小程序时先点击发布微信小程序,再运行npm run wx:dev即可
在这里插入图片描述

更多推荐