vuecli 根据不同环境打包修改代码中参数

背景：项目中传给服务器的值为html代码的字符串，其中img标签的url需根据项目部署项目服务器域名，生成对应的url链接，生成传给服务器的数据之前需替换img的url部分

解决：修改vue.config.js文件配置，package.json文件中自定义命令，生成不同的dist打包文件

package.json文件

"scripts": {
    "serve": "vue-cli-service serve --imageurl=http://xxx.xx.xx.xxx:8080/get",
    "build": "vue-cli-service build --imageurl=http://xxx.xx.xx.xxx:8080/get",
    "ali39": "vue-cli-service serve --imageurl=http://yyy.yy.yyy.yy:8080/get",
    "ali39build": "vue-cli-service build --imageurl=http://yyy.yy.yyy.yy:8080/get",
  },

vue.config.js文件

...
const webpack = require('webpack');
...
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        "process.argv": JSON.stringify(process.argv)
      })
    ]
  }
}
...

页面中，使用process.argv得到命令中的参数
例如以上配置，console.log(process.argv[3])输出的内容为字符串类型的
–imageurl=http://xxx.xx.xx.xxx:8080/get