uniapp(vuecli创建) 动态配置manifest.json文件

因为uniapp项目同时要适配h5跟小程序，并且走两套不同的登陆系统，h5普通的vue项目相信大家都不陌生，这就有个问题所在

如何配置proxy去代理请求地址(主要是h5区分线上与测试)

manifest.json文件中

{
  "h5": {
    "router": { "mode": "history", "base": "/" },
    "devServer": {
      "port": 8000,
      "disableHostCheck": true,
      "proxy": {
        "/myapi": {
          "changeOrigin": true,
          "secure": false,
          "pathRewrite": { "^/myapi": "/myapi" },
          "target": ""
        }
      }
    }
  },
}

这里的target就是需要动态去切换线上或者测试的,但是json文件我们无法去写表达式或者变量,所以我们可以利用node来进行这一流程，总体思路如下：通过node读取manifest.json文件，然后判断当前环境，动态写入target,具体实现如下：

根目录下新建env.dev.js与env.prod.js，内容如下,自己去根据实际变更env与dev的地址:

module.exports = {
    VUE_APP_REMOTE_HOST: 'http://dev.com',
}

然后在manifest的同级目录下新建modifyManifest.js文件(这个文件用node启动去读写json文件)

因为使用了JSON.parse,所以mainfest.json文件里面不能有注释

// 这个文件主要是为了动态写入h5的proxy代理地址,因为此时服务还未正式运行，他们的process.env.VUE_APP_REMOTE_HOST还没有确定好，只能取到
// 当前环境，所以判断一下，然后动态写入mainfest.json
// 如果也想要使用这个node配置其他端应用的话，可以先修改此文件，然后更改package.json的启动命令，如 dev:h5那里，再确定环境之后增加一句 node src/modifyManifest.js && 
const fs = require('fs')
const envDev = require('../env.dev') //development配置信息
const envPrd = require('../env.prod') //production配置信息
fs.readFile(`${__dirname}/manifest.json`, function (err, data) {
  if (err) {
    console.error(err)
  } else {
    var _data = JSON.parse(data.toString())
    // 核心代码是这一行，动态配置h5的代理地址
    const allProxy = Object.keys(_data['h5'].devServer.proxy)
    allProxy.forEach(item => {
      if (process.env.NODE_ENV === 'development') {
        _data['h5'].devServer.proxy[item].target = envDev.VUE_APP_REMOTE_HOST
      } else {
        _data['h5'].devServer.proxy[item].target = envPrd.VUE_APP_REMOTE_HOST
      }
    })
    _data = JSON.stringify(_data)
    // 写入
    fs.writeFile(
      `${__dirname}/manifest.json`,
      _data,
      {
        encoding: 'utf-8'
      },
      function (err) {
        if (err) {
          console.log('写入失败', err)
        } else {
          console.log('写入成功')
        }
      }
    )
  }
})

然后在package.json的启动命令处,手动增加启动node的命令,如下

build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 node src/modifyManifest.js&&vue-cli-service uni-build",

"dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 node src/modifyManifest.js&&vue-cli-service uni-serve",

增加的是node src/modifyManifest.js&&   ,切记要在NODE_ENV=development确定了环境之后再启动，具体启动命令可以根据个人项目去改变