vue+webpack+node 怎么实现动态获取URL

Question

一般vue里面的做法，是把api写在axios.defaults.baseURL = "http://api"。
如果我们要给开发环境，测试环境，生产环境分别配置不同的URL，常用的做法是写在不同的config里面：

package.json

"scripts": {
    "dev": "cross-env NODE_ENV=development node build/dev-server.js",
    "build": "cross-env NODE_ENV=production node build/build.js",
    "test": "cross-env NODE_ENV=test node build/build.js"
  },

然后在build里面写上条件判断，判断process.env.NODE_ENV === 'production ' ? config.production : config.test 然后将api配置写在config.js下面。

module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"http://production.com.cn/"'
}

module.exports = {
  NODE_ENV: '"test"',
  API_ROOT: '"http://test.com.cn/"'
}

那么我们就可以在axios里面统一配置axios.defaults.baseURL = process.env.API_ROOT
然后不同的环境，我们可以使用 npm run test 或者是 npm run production 来实现不同环境的切换。

我发现有时候测试和生产的不同只是api的地址不同，而每次的api修改我都需要修改代码。那么我能不能通过修改环境变量来实现api的修改呢？

我不在代码中写固定的api，而是从环境变量中获取api。
思路如下：

1. dockfile文件如下：

dockfile
#进入工作路径
WORKDIR /code
ADD . /code
#删除已有的依赖包后安装依赖包
#测试环境URL
RUN bash -lc 'cnpm i'
ENV BASE_URL http://production.com.cn/
EXPOSE 80
RUN npm run build
RUN cp -R dist/* /usr/share/nginx/html

2.config配置如下：

export default {
  baseUrl: process.env.BASE_URL,
  postUrl: process.env.POST_URL,
  domain: process.env.DOMAIN,
};

3.那么我就可以在axios.defaults.baseURL = config.baseUrl来获取api，而改变api的时候，我只需要修改环境变量即可。
现在问题就来了，我的config.baseUrl只能得到我在dockfile写的，npm run build 之前的BASE_URL, 而不能拿到我刚刚修改的环境变量。
提问：这种思路能行吗？我应该怎么实现它，是通过修改一些配置，还是通过脚本呢？