动态修改manifest.json

点击查看代码

// h5开发环境
const h5Dev = {
	baseUrl: 'https://devh5.....'
}

// h5测试环境
const h5Test= {
	baseUrl: 'https://testh5.....'

}

// h5生产环境
const h5Prod= {
	baseUrl: 'https://prodh5.....'

}

// 微信小程序开发环境
const mpWeixinDev = {
	baseUrl: 'https://devwx.....'
}

// 微信小程序测试环境
const mpWeixinTest= {
	baseUrl: 'https://testwx.....'

}

// 微信小程序生产环境
const mpWeixinProd= {
	baseUrl: 'https://productionwx.....'

}
// app开发环境
const appDev = {
	baseUrl: 'https://devApp.....'
}

// app测试环境
const appTest= {
	baseUrl: 'https://testApp.....'

}

// app生产环境
const appProd= {
	baseUrl: 'https://productionApp.....'

}

const envConfig = {
	'h5-dev':h5Dev,
	'h5-test':h5Test,
	'h5-prod':h5Prod,
	'mp-weixin-dev':mpWeixinDev,
	'mp-weixin-test':mpWeixinTest,
	'mp-weixin-prod':mpWeixinProd,
	'app-dev':appDev,
	'app-test':appTest,
	'app-prod':appProd,
}
module.exports=envConfig

const fs = require('fs')
//自定义的环境变量根据实际对应路径引入
const envConfig=require('./config/env.js')
//读取manifest.json内容
fs.readFile(`${__dirname}/manifest.json`, (error, res)=> {
	if (!error) {
		let data = JSON.parse(res.toString());
		//此时process.env.ENV_TYPE依然无法读取到但是可以读取process.env.UNI_SCRIPT,该值为自定义编译平台配置字段名称，这就是上面取字段时候要求和自定义编译平台字段一样原因
		let env =process.env.UNI_SCRIPT
		if (env&&env.includes('h5')) {
			if ( data?.h5?.devServer?.proxy) {
				let proxy= data.h5.devServer.proxy
				for (let key in proxy) {
					proxy[key].target =envConfig[env].baseUrl
				}
				// console.log(JSON.stringify(data.h5),'proxy')
			   //重新写入修改后内容
				fs.writeFile(
				      `${__dirname}/manifest.json`,
				      JSON.stringify(data),
				      {
				        encoding: 'utf-8'
				      },
				       (error)=>{
				        if (error) {
				          console.log(error,'修改失败')
				        } else {
				          console.log('修改成功')
				        }
				      }
				    )

			}
		}
	}
})
2.vue.config.js引入modifyManifest.js
vue.config.js(没有该文件新建，位于项目根目录)新增：
注意：兼容性写法此处用require非import

至此，每次通过运行-编译不同的环境，编辑器会动态修改manifest.json-target值，代理指向对应的环境