没有没针对 Vue 项目中 .env 配置文件过多的优化方案？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 307 天前的主题，其中的信息可能已经有所发展或是发生改变。

技术背景：
vite, vue3

问题:
项目打包到不同的地方，需要读取不同的值。目前这个值配置在 .env.{envName} 文件中，然后配合 build:{envName} 来打包满足以上的需求。例如：

// .env.demo1 文件
VITE_APP_XXX=XXX

// .env.demo2 文件
VITE_APP_XXX=XXX

// .env.demo3 文件
VITE_APP_XXX=XXX

// package.json 文件
{
  scripts: {
    // ...
    build:demo1: "vite-build --mode demo1",
    build:demo2: "vite-build --mode demo2"
    build:demo3: "vite-build --mode demo3"
  }
}

随着发布的环境越来越多，每次发布都需要添加一个新的 .env 文件和 build 命令。

期望：
能否有办法可以打包的时候动态传递这些变量值，或者别的方法，不希望每次有新的环境都要更改代码。再不济有没有什么方案可以优化上面的打包思路？谢谢各位大佬，不胜感激。

4 条回复 • 2024-01-31 16:00:53 +08:00

Rache1

307 天前

你说有没有一种可能，参数少的时候，都是直接加在命令行参数的，参数多了后，写在命令参数的不方便了，才用的这种 env 的模式。

17681880207

307 天前

@Rache1 理解。我这里只是举一个例子而已，实际上参数确实挺多的。

zane626

307 天前

在项目中创建一个 js 脚本文件,通过读取配置来动态生成.env, 在打包命令中增加执行初始化 env 脚本命令
```shell
// package.json
{
scripts: {
"build:file": "node build/bin/environment.js",
build:demo1: "vite-build --mode demo1",
build:demo2: "vite-build --mode demo2"
build:demo3: "vite-build --mode demo3"
}
}
// environment.js
import serverBase form 'src/config/serverBase'
/*
动态生成配置文件内容使用 fs 写入
*/

// serverBase.js
module.exports = {
"local": {
"host": "xxx"
},
"dev": {
"host": ""
}
}
```

Rache1

307 天前

@17681880207 #2 其实这种方式才是 “最好的”，其他人拿到代码后，只需要执行 npm run xxxx ，就可以打包或者把项目跑起来。

不清楚你的具体场景，为什么每次发布都需要添加一个新的。。

如果确实如此的话，可以考虑写个脚本来自动创建