前端写一个 shell 脚本来执行 npm 命令

目的从 url 获取前端请求基地址, 通过环境变量注入

1. shell 脚本

#!/bin/bash

parse_json() {
  echo "${1//\"/}" | sed "s/.*$2:\([^,}]*\).*/\1/"
}

RESULT=$(parse_json $(curl -s https://www.fastmock.site/mock/cd8e3b8f92711dd9e4a424cf0603e8fe/api/getHost) "data")
# 注入变量
npm run build -- --inject_host=$RESULT

2. vue.config.js

/**
 * @description: 判断是否为生产环境
 * @param {*}
 * @return Boolean
 */
const isProduct = () => {
  return process.env.NODE_ENV == 'production'
}

// 环境参数
const argv = process.argv
module.exports = {
  publicPath: './',
  chainWebpack: config => {
    config.when(isProduct(), () => {
      config.plugin('define').tap(args => {
        let name = 'process.env'
        let customHost = null

        argv.forEach(item => {
          if (/inject_host/.test(item)) {
            customHost = JSON.stringify(item.split('=')[1])
            return true
          }
        })

        if (customHost) {
        // 在这里如果有 VUE_APP_BASE_API 就覆盖, 没有就新增这个变量
          args[0][name] = Object.assign(args[0][name], {
            VUE_APP_BASE_API: customHost
          })
        }
        return args
      })
    })
  }
}

npm 注入参数 (阮一峰)
获取json参数