需求背景:
由于项目的测试环境和生产环境需要部署到域名根目录下的不同目录,所以需要在发行时动态修改路由的 base 路径,手动修改容易遗漏出错,于是便有了该需求
话不多说直接上代码
在vue.config.js文件添加如下代码
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')
}
// 动态修改 h5 路由 base
if (process.env.NODE_ENV === 'production'){
//生产的 base
replaceManifest('h5.router.base', '"/basePathPro/"')
}else {
//测试的 base
replaceManifest('h5.router.base', '"/basePath/"')
}
fs.writeFileSync(manifestPath, Manifest, {
"flag": "w"
})
module.exports = {
......
}
更多参数修改请参考官方文档:uniapp 官方文档