Vue-element-admin: 如何动态改变打包,构建后的环境变量process.env.VUE_APP_BASE_API

[weiweidong1993]

项目用的Vue版本为

"vue": "2.6.10"

当前调用后端接口定义在文件request.js中

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, 
  timeout: 5000 // request timeout
})

可以看到baseURL是来自环境变量中的VUE_APP_BASE_API

而VUE_APP_BASE_API定义在.env.xxx文件中,这里以production文件为例

在这里是写死的
VUE_APP_BASE_API = '//fl.cn/api'

所以执行npm run build的时候就会将fl.cn/api打包进环境变量中,生产环境所有接口的域名都会是fl.cn,现在我想在npm run build 后传参,来改变VUE_APP_BASE_API的值,继而改变接口访问的域名.

---

尝试在request.js和.env文件里面引入执行构建命令的参数process.argv.slice(2),并打印之,结果得到的是空的数组,百思不得其解,请大佬解惑

@PanJiaChen

[weiweidong1993]

有没有大佬给点思路

大白话就是:我的生产环境的ip:port 是动态改变的 我想在构建的时候通过传入参数的方式动态改变环境变量,从而改变,接口访问的域名,求大佬解惑,有偿,10块

[weiweidong1993]

有偿求助,奶茶钱,谢谢

[itreetree]

@weiweidong1993 构建之后久变成静态文件了，应该是不支持命令行参数的 ， 加一个接口来获取 api地址 ，地址变动请求失败后 调这个接口来获取正确的地址 ，或者维护一个flag

[fengjunzixian]

@weiweidong1993 构建之后久变成静态文件了，应该是不支持命令行参数的 ， 加一个接口来获取 api地址 ，地址变动请求失败后 调这个接口来获取正确的地址 ，或者维护一个flag

构建的时候就可以传值改变啊,反正vue2.5是可以的 有config和build文件夹的那种

现在用vue.config.js就不成了 因为环境变量都写死了 不知道在哪里引入

[JaxsonWang]

@weiweidong1993

const service = axios.create({
  baseURL: window.apiUrl,
  timeout: 5000 // request timeout
})

打包直接这样赋值：window.apiUrl = 'http://host:port' 可以做到动态修改，不过这个赋值需要在 vue-cli 打包 js 之前赋值，建议把上面代码直接放在 head 里。

[weiweidong1993]

@weiweidong1993

const service = axios.create({
  baseURL: window.apiUrl,
  timeout: 5000 // request timeout
})

打包直接这样赋值：window.apiUrl = 'http://host:port' 可以做到动态修改，不过这个赋值需要在 vue-cli 打包 js 之前赋值，建议把上面代码直接放在 head 里。

执行 npm run build 命令的时候怎么把host 和 port 传进去并赋值,这是个问题

[JaxsonWang]

@weiweidong1993

const service = axios.create({
  baseURL: window.apiUrl,
  timeout: 5000 // request timeout
})

打包直接这样赋值：window.apiUrl = 'http://host:port' 可以做到动态修改，不过这个赋值需要在 vue-cli 打包 js 之前赋值，建议把上面代码直接放在 head 里。

执行 npm run build 命令的时候怎么把host 和 port 传进去并赋值,这是个问题

参考：环境变量

[dukeP]

有处理过类似的场景，可以将相关信息通过 npm 脚本传参进去，然后在将参数通过 webpack.DefinePlugin 配成全局变量就行了。npm 脚本传参需要用 -- 标明 npm run build -- --env.host=8080

[weiweidong1993]

有处理过类似的场景，可以将相关信息通过 npm 脚本传参进去，然后在将参数通过 webpack.DefinePlugin 配成全局变量就行了。npm 脚本传参需要用 -- 标明 npm run build -- --env.host=8080

现在前端有两个项目,一个前台一个后台,前台和后台的实现方式不一样
前台有build 和config文件夹

后台零配置 只有一个vue.config文件

目前前台是你说的那种方式实现的 后台试了一下 感觉走不通 因为实现方式完全不一样

"build": "vue-cli-service build",

[dulinxi]

我现在用了一个文件放到了public文件夹下，config.js

然后在index中引入的

然后request.js中

打包完后，可以直接修改dist下的config文件改地址
可能比较戳哈，有没有更好的解决办法。

[weiweidong1993]

我现在用了一个文件放到了public文件夹下，config.js

然后在index中引入的

然后request.js中

打包完后，可以直接修改dist下的config文件改地址
可能比较戳哈，有没有更好的解决办法。

自己研究了下 更改了package.json

添加了一行
"build:cus": "vue-cli-service build --mode cus"

在src下新增文件.env.cus 代码如下

在vue.config.js文件中添加如下代码:

js if (process.env.env === 'cus') { const chalk = require('chalk') const npmArgs = process.argv.slice(2) var minimist = require('minimist'); var args = minimist(npmArgs); var host = args.host console.log("[host]-> " + host) if (host == undefined) { console.log(chalk.red('please set host!\nExample: npm run build:cus -- --host=fl.test')) process.exit(-1); } process.env.VUE_APP_BASE_API = "//"+host + "/api" }

即可.

现在如果想要将axios接口访问的域名更改为任意自定义的ip

直接执行命令:

npm run build:cus -- --host=fl.demo

[JiBadBoy]

我现在用了一个文件放到了public文件夹下，config.js

然后在index中引入的

然后request.js中

打包完后，可以直接修改dist下的config文件改地址
可能比较戳哈，有没有更好的解决办法。

自己研究了下 更改了package.json

添加了一行
"build:cus": "vue-cli-service build --mode cus"

在src下新增文件.env.cus 代码如下

在vue.config.js文件中添加如下代码:

if (process.env.env === 'cus') {
  const chalk = require('chalk')
  const npmArgs = process.argv.slice(2)
  var minimist = require('minimist');
  var args = minimist(npmArgs);
  var host = args.host
  console.log("[host]-> " + host)
  if (host == undefined) {
    console.log(chalk.red('please set host!\nExample: npm run build:cus -- --host=fl.test'))
    process.exit(-1);
  }
  process.env.VUE_APP_BASE_API = "//"+host + "/api"
}```

即可.

现在如果想要将axios接口访问的域名更改为任意自定义的ip

直接执行命令:

npm run build:cus -- --host=fl.demo

但是你这样每次都要打包，假如我这个项目需要部署好几个机器，ip地址都不一样，怎么办

[jayfongs]

打包前为所欲为都能改，打包后还想改环境变量那就不得行了。
目前我司打的docker镜像。玩法是打包后约定一个环境变量，然后写到index.html 的html标签上面。然后在axios里面获取html标签上的地址

这里设置API_BASE_URL变量，运行的时候动态改这个API_BASE_URL的值就行了

运行后会在HTML标签上生成

然后在axios中接收

目前我司是这么玩的，思路就是这样。如果大家有更好的方法可以给我说下