vue.config.js 如何配置动态的代理域名

Question

Answer 1

可以本地弄个nodejs的项目转发，这里配本地node的地址，动态获取的逻辑在nodejs里写就行了

Answer 2

设置全局变量，启动项目时传入。

Answer 3

同样的需求...

Answer 4

npm i --save cross-env
然后在pageage.json内，根据不同的环境设置不同的临时环境变量
然后根据临时的环境变量来动态的设置ip, switch(process.env.VUE_APP_名字) ... case ....
设置的 环境变量需要以vue_app 打头

Answer 5

vue-cli默认开发服务器是用npm run serve启动,这条命令实际调用了vue-cli-service serve.

你可以添加一条命令"preserve": "node dev.js",调用npm run serve前会先调用它.
然后添加一个dev.js.

const fs = require('fs');
const path = require('path');
setTimeout(() => {
  // 你的异步逻辑
  // 获取到后,将新的api地址写入一个json
  fs.writeFile(path.resolve(__dirname, './api.json'), JSON.stringify({path: 'http://baidu.com'}), function (err, data) {
    console.log(err ? '写入失败' : '写入成功');
  })
}, 1000)

修改vue.config.js,改为从api.json中获取api地址即可.

另外,你配置里的判断环境的逻辑可以去掉.devServer只在开发环境有效,前端代码部署之后都是跑在别的网站,配置这个没有意义

---

我看你的意图不是开发时配置动态的api服务器吧.你的目的是部署之后配置新的api地址?这个不是你的活,找运维去.

Answer 6

一模一样的case，是可以的~
首先你启动本地server 使用的命令是

vue-cli-service  serve --mode local

然后你要配置你的.env.local文件，在里面写入一行定义环境变量

MODE=development

最后你就可以在vue.config.js里用三元表达式，来根据不同环境定义proxy地址了

target: process.env.MODE === 'development' ? 'http://domain_a':'http://domain_b',