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

查看 62|回复 3
作者:17681880207   
技术背景:
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 命令。
期望:
能否有办法可以打包的时候动态传递这些变量值,或者别的方法,不希望每次有新的环境都要更改代码。再不济有没有什么方案可以优化上面的打包思路?谢谢各位大佬,不胜感激。

build, vite-build, env, 文件

Rache1   
你说有没有一种可能,参数少的时候,都是直接加在命令行参数的,参数多了后,写在命令参数的不方便了,才用的这种 env 的模式。
17681880207
OP
  
@Rache1 理解。我这里只是举一个例子而已,实际上参数确实挺多的。
zane626   
在项目中创建一个 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": ""
}
}
```
您需要登录后才可以回帖 登录 | 立即注册

返回顶部