uniapp 自定义发行 动态修改 manifest.json

这边需求是：根据不同的打包环境 设置不同的标题以及路径。方便各种调试。防止 每次手动每次修改 manifest.json 出错

 uniapp 自定义发行:

添加自定义发行之后 Hbuilder 编辑器会自动多 出来按钮：

官方文档：概述 | uni-app官网

我这里的配置是这样： package.json

这里主要用于显示两个按钮以及设置相关 字段：

{
	"dependencies": {
		"js-md5": "^0.7.3",
		"moment": "^2.29.4"
	},
 
	"uni-app": {
		"scripts": {
			"h5_prod": {
				"title": "品创收银台",
				"env": {
					"UNI_PLATFORM": "h5",
					"NODE_ENV": "prod",
					"UNI_OUTPUT_DIR": "dist/build/h5_prod"
				},
				"router": {
					"mode": "history",
					"base": "/payment/h5/"
				},
				"define": {
					"H5_PROD": true
				}
			},
			"h5_uat": {
				"title": "品创收银台uat",
				"env": {
					"UNI_PLATFORM": "h5",
					"NODE_ENV": "uat",
					"UNI_OUTPUT_DIR": "dist/build/h5_uat"
				},
				"router": {
					"mode": "history",
					"base": "/payment/h5_uat/"
				},
				"define": {
					"H5-UAT": true
				}
			}
		}
	}
}

 设置网页标题和 base 路径：

 

动态修改 manifest.json 

需求是 根据发布：  h5_prod / h5_uat  来动态修改  manifest.json 文件

官方文档： uni-app官网

这里需要在 项目根路径下创建：vue.config.js 文件

我这里 代码主要是 判断按钮的来源进行处理：

console.log('process.env[UNI_SCRIPT]:', process.env['UNI_SCRIPT'])
if (process.env['UNI_SCRIPT'] == 'h5_prod') {
	replaceManifest('h5.title', '"品创收银台"')
	replaceManifest('h5.router.base', '"/payment/h5/"')
} else if (process.env['UNI_SCRIPT'] == 'h5_uat') {
	replaceManifest('h5.title', '"品创收银台uat"')
	replaceManifest('h5.router.base', '"/payment/h5_uat/"')
}

 完整代码如下：(贴出来的代码 没有删除注释 留作它用)

const fs = require('fs')
//此处如果是用HBuilderX创建的项目manifest.json文件在项目跟目录，如果是 cli 创建的则在 src 下，这里要注意
//process.env.UNI_INPUT_DIR为项目所在的绝对路径，经测试，相对路径会找不到文件
const manifestPath = process.env.UNI_INPUT_DIR + '/manifest.json'
let Manifest = fs.readFileSync(manifestPath, {
	encoding: 'utf-8'
})
 
function replaceManifest(path, value) {
	const arr = path.split('.')
	const len = arr.length
	const lastItem = arr[len - 1]
	let i = 0
	let ManifestArr = Manifest.split(/\n/)
 
	for (let index = 0; index < ManifestArr.length; index++) {
		const item = ManifestArr[index]
		if (new RegExp(`"${arr[i]}"`).test(item)) ++i;
		if (i === len) {
			const hasComma = /,/.test(item)
			ManifestArr[index] = item.replace(new RegExp(`"${lastItem}"[\\s\\S]*:[\\s\\S]*`),
				`"${lastItem}": ${value}${hasComma ? ',' : ''}`)
			break;
		}
	}
	Manifest = ManifestArr.join('\n')
}
console.log('process.env[UNI_SCRIPT]:', process.env['UNI_SCRIPT'])
if (process.env['UNI_SCRIPT'] == 'h5_prod') {
	replaceManifest('h5.title', '"品创收银台"')
	replaceManifest('h5.router.base', '"/payment/h5/"')
} else if (process.env['UNI_SCRIPT'] == 'h5_uat') {
	replaceManifest('h5.title', '"品创收银台uat"')
	replaceManifest('h5.router.base', '"/payment/h5_uat/"')
}
 
fs.writeFileSync(manifestPath, Manifest, {
	"flag": "w"
})
 
module.exports = {
 
}
 
// module.exports = {
// 	chainWebpack: config => {
// 		console.log("process.env.BUILD_TYPE:------------------:", process.env['UNI_SCRIPT'])
// 		console.log("config:------------------:", process['UNI_MANIFEST'])
// 		//console.log("config:------------------:", config)
// 		// config
// 		//   .plugin('define')
// 		//   .tap(args => {
// 		//     args[0]['process.env'].VUE_APP_TEST = '"test"'
// 		//     return args
// 		//   })
 
// 		if (process.env['UNI_SCRIPT'] == 'h5_prod') {
// 			process['UNI_MANIFEST']['h5']['title'] = '"品创收银台"'
// 			process['UNI_MANIFEST']['h5']['router'] = {
// 				mode: 'history',
// 				base: '/payment/h5/'
// 			}
// 		} else if (process.env['UNI_SCRIPT'] == 'h5-uat') {
// 			process['UNI_MANIFEST']['h5']['title'] = '"品创收银台uat"'
// 			process['UNI_MANIFEST']['h5']['router'] = {
// 				mode: 'history',
// 				base: '/payment/h5_uat/'
// 			}
// 		}
// 		return config
// 		// console.log("config:------------------:", process['UNI_MANIFEST'])
// 		// config
// 		// 	.plugin('define')
// 		// 	.tap(args => {
// 		// 		console.log("args: ", args)
// 		// 		// 在这里也可以写全局的变量
// 		// 		return args
// 		// 	})
 
// 		// console.log(config.Manifest)
// 		// return config
// 	}
// }
// module.exports = {
// 	defineConfig: Manifest
// }