uniapp根据不同的环境配置不同的运行基础路径

前言

当我们使用uniapp开发同一个项目发布不同的环境二级路径不同时，这时候我们就要根据环境来添加运行的基础路径

product：xxx-product-api.xxx.com:9002/productConf...

text：xxx-text-api.xxx.com:9002/textConfig/

但是当我们使用HBuilderX开发时你会发现manifest.json手动配置Web配置时只能配置一个像这种情况

碰到这种情况你会怎么处理?

你是不是会在每次打包发布之前变更该环境对应基础路径?

这样也是一种方法，不过其过程太繁琐，废话不多说，上正文！！！

正文

当我们使用HX创建项目时项目中是没有package.json文件和vue.config.js文件的

在根目录下创建package.json文件，用于配置多个环境 也可用于Hx自定义发行

js 复制代码

{
    "id": "sin-signature",
    "name": "签名组件-兼容H5、小程序、APP",
    "version": "1.0.0",
    "description": "用于uni-app的签名组件，支持H5、小程序、APP，可导出svg矢量图片。",
    "keywords": ["签名,签字,svg,canvas"],
    
    "uni-app": {  
	   "scripts": {  
	      "h5-dev": {  
	        "title": "H5-DEV",  
	        "env": {  
	          "NODE_ENV": "development",  
	          "UNI_PLATFORM": "h5",  
	          "VUE_APP_BASE_API": "http://192.168.3.3:8081"  
	        },  
	        "define": {  
	          "H5": true  
	        }  
	      },  
	      "h5-xx": {  
	        "title": "H5-XX",  
	        "env": {  
	          "NODE_ENV": "production",  
	          "UNI_PLATFORM": "h5",  
	          "VUE_APP_BASE_API": "http://xxx.xx.xx.xxx:8092"
	        },  
	        "define": {  
	          "H5": true  
	        }  
	      },
		  "h5-test": {
		    "title": "H5-TEST",  
		    "env": {  
		      "NODE_ENV": "production",  
		      "UNI_PLATFORM": "h5",  
		      "VUE_APP_BASE_API": "https://beta-text-api.nextopen.cn"  
		    },  
		    "define": {  
		      "H5": true  
		    }  
		  },  	
	      "h5-prod": {  
	        "title": "H5-PROD",  
	        "env": {  
	          "NODE_ENV": "production",  
	          "UNI_PLATFORM": "h5",  
	          "VUE_APP_BASE_API": "https://product-api.nextopen.cn"  
	        },  
	        "define": {  
	          "H5": true  
	        }  
	      },
		
	  }
}

在根目录下创建vue.config.js文件，用于处理不同环境配置不同的基础路径

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.UNI_SCRIPT_ENV?.NODE_ENV === 'text'){
	//测试的 base
    replaceManifest('h5.router.base', '"/textConfig/"')
}else if (process.UNI_SCRIPT_ENV?.NODE_ENV === 'product'){
	//生产的 base
    replaceManifest('h5.router.base', '"/productConfig/"')
}else {
	/其他的 base
    replaceManifest('h5.router.base', '""')
}

fs.writeFileSync(manifestPath, Manifest, {
  "flag": "w"
})

参考uniapp官方文档：uniapp.dcloud.net.cn/collocation...