這邊需求是：根據(jù)不同的打包環(huán)境 設置不同的標題以及路徑。方便各種調試。防止 每次手動每次修改 manifest.json 出錯

?uniapp 自定義發(fā)行:

添加自定義發(fā)行之后 Hbuilder 編輯器會自動多 出來按鈕：

官方文檔：概述 | uni-app官網(wǎng)

我這里的配置是這樣： package.json

這里主要用于顯示兩個按鈕以及設置相關 字段：

{
	"dependencies": {
		"js-md5": "^0.7.3",
		"moment": "^2.29.4"
	},

	"uni-app": {
		"scripts": {
			"h5_prod": {
				"title": "品創(chuàng)收銀臺",
				"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": "品創(chuàng)收銀臺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
				}
			}
		}
	}
}

?設置網(wǎng)頁標題和 base 路徑：

?

動態(tài)修改 manifest.json?

需求是 根據(jù)發(fā)布：? h5_prod / h5_uat? 來動態(tài)修改? manifest.json 文件

官方文檔： uni-app官網(wǎng)

這里需要在 項目根路徑下創(chuàng)建：vue.config.js 文件

我這里 代碼主要是 判斷按鈕的來源進行處理：

console.log('process.env[UNI_SCRIPT]:', process.env['UNI_SCRIPT'])
if (process.env['UNI_SCRIPT'] == 'h5_prod') {
	replaceManifest('h5.title', '"品創(chuàng)收銀臺"')
	replaceManifest('h5.router.base', '"/payment/h5/"')
} else if (process.env['UNI_SCRIPT'] == 'h5_uat') {
	replaceManifest('h5.title', '"品創(chuàng)收銀臺uat"')
	replaceManifest('h5.router.base', '"/payment/h5_uat/"')
}

?完整代碼如下：(貼出來的代碼 沒有刪除注釋 留作它用)文章來源地址http://www.zghlxwxcb.cn/news/detail-511372.html

const fs = require('fs')
//此處如果是用HBuilderX創(chuàng)建的項目manifest.json文件在項目跟目錄，如果是 cli 創(chuàng)建的則在 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', '"品創(chuàng)收銀臺"')
	replaceManifest('h5.router.base', '"/payment/h5/"')
} else if (process.env['UNI_SCRIPT'] == 'h5_uat') {
	replaceManifest('h5.title', '"品創(chuàng)收銀臺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'] = '"品創(chuàng)收銀臺"'
// 			process['UNI_MANIFEST']['h5']['router'] = {
// 				mode: 'history',
// 				base: '/payment/h5/'
// 			}
// 		} else if (process.env['UNI_SCRIPT'] == 'h5-uat') {
// 			process['UNI_MANIFEST']['h5']['title'] = '"品創(chuàng)收銀臺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
// }

到了這里，關于uniapp 自定義發(fā)行 動態(tài)修改 manifest.json的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！