点击查看代码
// 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值,代理指向对应的环境