Vue-cli: 环境变量配置方式优化 (.env => .env.js）

[oGZo]

What problem does this feature solve?

1. 解决环境配置文件内容的不可编程问题；
2. 提高环境配置文件内容的扩展性；

What does the proposed API look like?

now

filename

.env

content

TOP_DOMAIN=a.com
AI_DOMAIN=ai.a.com
FM_DOMAIN=fm.a.com

new

filename

.env.js

content

const TOP_DOMAIN = 'a.com';
module.exports = {
    TOP_DOMAIN,
    AI_DOMAIN: `ai.${TOP_DOMAIN}`,
    FM_DOMAIN: `fm.${TOP_DOMAIN}`
}

[sodatea]

1. .env 文件本来就不应该编程，它不像 babel/webpack 这类复杂工具的配置，内含的逻辑应该是非常少的，关于此类配置文件的一些讨论可以看 https://12factor.net/config
2. .env 是 *nix 以来业界约定俗成的格式，门槛较低且跨平台跨语言跨框架，改成 .env.js 意义不大并且增加了我们的维护成本
3. 可扩展性问题我们可以用 https://github.com/motdotla/dotenv-expand/，这个可以在 3.5 里加上

[oGZo]

1. .env 文件本来就不应该编程，它不像 babel/webpack 这类复杂工具的配置，内含的逻辑应该是非常少的，关于此类配置文件的一些讨论可以看 https://12factor.net/config
2. .env 是 *nix 以来业界约定俗成的格式，门槛较低且跨平台跨语言跨框架，改成 .env.js 意义不大并且增加了我们的维护成本
3. 可扩展性问题我们可以用 https://github.com/motdotla/dotenv-expand/，这个可以在 3.5 里加上

在这块，还是你们考虑的还是更全面，受教了。 给个👍

[yunweb]

可以不用其他插件，vue-cli英文文档（非中文）上有：
在vue.config.js文件中，编写代码：

// 如果是测试环境，则根据CI命令参数，动态修改测试环境地址(测试环境1、测试环境2、测试环境3)
// VUE_APP_API_URL=http://test1.example.com
const lastArgv = process.argv.slice(-1)[0]; // 获取node最后一个命令参数
if (lastArgv.indexOf('--dev=') === 0) {
    const env = lastArgv.split('=')[1];
    // 如果是正整数，则替换
    if (Number.isInteger(Number(env)) && Number(env) >= 0) {
        process.env.VUE_APP_API_URL = process.env.VUE_APP_API_URL.replace('test', env);
    }
}

module.exports = {
    // other code
}

// 将 test1.example.com 替换为 test2.example.com
在执行打包的时候：npm run build:dev -- --dev=2

这样在打包的之后，自动把测试环境的 test1 地址改成 test2 地址