- 实现项目的环境隔离,比如发行test 测试环境,那么导出web成功后再执行自定义脚本进行一个目录文件的移动,移动到test目录下,但是发现在vue.config.js中配置后完成后 ,他是在编译中执行了自定义脚本,这就出现了一个这样的问题,那就是编译是一个过程,导出web也是一个过程,那么会在编译完成后,但是没有完成导出的时候,就进行了目录文件移动的脚本,那么这个时候就是错误的文件,
- 第二个问题,也是配置完vue.config.js文件后发现不光在发行时会触发自定义移动目录的脚本,在运行时也会触发这一个脚本,但是我在运行时不想进行目录文件的移动,有什么参数可以判断吗
- 请问各位大神有知道如何在项目导出成功后再调用自定义脚本的方法和配置吗,有什么参数或者配置可以实现判断运行还是发行
- 以下是我的脚本代码
这是我的vue.config.js文件
// console.log('vue.config.js 执行了')
// console.log('%O', process.UNI_SCRIPT_ENV)
// 定义AfterBuildPlugin插件
class AfterBuildPlugin {
constructor(options) {
this.options = options || {};
}
apply(compiler) {
// 在webpack构建完成后执行脚本
compiler.hooks.done.tap('AfterBuildPlugin', (stats) => {
// 检查构建是否成功完成
if (stats.hasErrors()) {
console.error('构建过程中存在错误,跳过after-build脚本执行');
return;
}
const { execSync } = require('child_process');
try {
console.log(`执行构建后脚本: ${this.options.script}`);
// 执行指定的脚本命令
execSync(this.options.script, { stdio: 'inherit' });
console.log('构建后脚本执行完成');
} catch (error) {
console.error('构建后脚本执行失败:', error);
}
});
}
}
module.exports = {
chainWebpack: (config) => {
// 使用AfterBuildPlugin并传递参数
config.plugin('after-build').use(new AfterBuildPlugin({
script: 'node "' + __dirname + '/afterBuilder.js" --env ' + process.UNI_SCRIPT_ENV.ENV
}))
}
}
这是我的afterBuilder.js 脚本文件
const fs = require('fs-extra');
const path = require('path');
// 获取命令行参数
function getCommandLineArgs() {
const args = {};
process.argv.slice(2).forEach(arg => {
const matches = arg.match(/--(\w+)=(.+)/);
if (matches) {
args[matches[1]] = matches[2];
} else if (arg.startsWith('--')) {
const key = arg.slice(2);
args[key] = process.argv[process.argv.indexOf(arg) + 1] || true;
}
});
return args;
}
const commandLineArgs = getCommandLineArgs();
// 配置路径 - 根据你的实际情况修改
const config = {
// HBuilder打包输出目录
buildOutputDir: path.join(dirname, 'unpackage/dist/build/web'),
// 目标复制目录
targetDir: path.join(dirname, 'unpackage/dist/' + commandLineArgs.env + '/build/web'),
// 临时备份目录
backupDir: path.join(__dirname, 'unpackage/backup')
};
async function main() {
try {
console.log('开始执行打包后处理脚本...');
// 1. 检查打包目录是否存在
if (!await fs.pathExists(config.buildOutputDir)) {
throw new Error(`打包目录不存在: ${config.buildOutputDir}`);
}
// 2. 创建备份目录
await fs.ensureDir(config.backupDir);
console.log(`已创建备份目录: ${config.backupDir}`);
// 3. 备份原始文件
await fs.copy(config.buildOutputDir, config.backupDir, {
overwrite: true
});
console.log('原始文件备份完成');
// 4. 创建目标目录
await fs.ensureDir(config.targetDir);
console.log(`已创建目标目录: ${config.targetDir}`);
// 5. 复制文件到目标目录
await fs.copy(config.buildOutputDir, config.targetDir, {
overwrite: true
});
console.log(`文件已复制到目标目录: ${config.targetDir}`);
// 6. 执行其他自定义操作(可选)
console.log('执行额外操作...');
// 例如: 记录版本信息
const versionInfo = {
timestamp: new Date().toISOString(),
version: require('./package.json').version,
buildNumber: new Date().getTime().toString()
};
await fs.writeJson(path.join(config.targetDir, 'version.json'), versionInfo, { spaces: 2 });
// 7. 恢复原始文件
await fs.copy(config.backupDir, config.buildOutputDir, {
overwrite: true
});
console.log('原始文件已恢复');
// 8. 清理备份目录
await fs.remove(config.backupDir);
console.log('备份目录已清理');
console.log('所有操作完成!');
} catch (err) {
console.error('处理过程出错:', err.message);
process.exit(1);
}
}
// 执行主函数
main();
这是HBuilder X 的输出结果
[HBuilder] 14:00:58.134 项目 测试打包项目 [UNI19908F9] 开始发布到Web...
[HBuilder] 14:00:59.329 正在编译中...
[HBuilder] 14:01:11.020 执行构建后脚本: node "D:\code\test-dev\web\测试打包项目/afterBuilder.js" --env test
[HBuilder] 14:01:11.130 开始执行打包后处理脚本...
[HBuilder] 14:01:11.130 等待Web项目导出完成...
[HBuilder] 14:01:11.130 检测到Web项目已导出完成,耗时0ms
[HBuilder] 14:01:11.130 已创建备份目录: D:\code\test-dev\web\测试打包项目\unpackage\backup
[HBuilder] 14:01:11.161 原始文件备份完成
[HBuilder] 14:01:11.161 已创建目标目录: D:\code\test-dev\web\测试打包项目\unpackage\dist\test\build\web
[HBuilder] 14:01:11.161 文件已复制到目标目录: D:\code\test-dev\web\测试打包项目\unpackage\dist\test\build\web
[HBuilder] 14:01:11.161 执行额外操作...
[HBuilder] 14:01:11.161 原始文件已恢复
[HBuilder] 14:01:11.161 备份目录已清理
[HBuilder] 14:01:11.161 所有操作完成!
[HBuilder] 14:01:11.167 构建后脚本执行完成
[HBuilder] 14:01:11.167 项目 测试打包项目 编译成功。
[HBuilder] 14:01:11.233 项目 测试打包项目 导出Web成功,路径为:D:\code\test-dev\web\测试打包项目\unpackage\dist\build\web
[HBuilder] 14:01:11.233 注意请部署到web服务器使用,不要使用资源管理器直接打开,除非进行相对路径配置,具体参考:https://ask.dcloud.net.cn/article/37432。
1 个回复
DCloud_UNI_JBB
可以通过
process.env.NODE_ENV === 'production'
判断环境,true
就是发行,反之运行