前端项目动态环境变量

常用前端 node 环境变量设置 dotenv,config 的使用

dotenv

官方文档:https://github.com/motdotla/dotenv#readme

npm 仓库:https://www.npmjs.com/package/dotenv

安装

 pnpm add dotenv

使用

在 项目根目录新建.env 文件

SECRET_KEY=YOURSECRETKEYGOESHERE # comment
SECRET_HASH="something-with-a-#-hash"

USERNAME=ronhai
PASSWORD=ronhai
import dotenv from "dotenv";
dotenv.config();
console.log(process.env);

20250910215526

.env 的配置不好嵌套,变量太多也不太好找,可以使用 config 来设置

config

官方仓库:https://github.com/node-config/node-config#readme

npm 库:https://www.npmjs.com/package/config

安装

pnpm add config

使用

在根目录下新建 config/default.json

{
  "token_secrent": "dffasfsdafsd",
  "rh": {
    "host": "localhost",
    "port": 3000,
    "password": "ronhai"
  }
}

config 设置的变量是用 json 格式,也可以 yaml 格式

import config from "config";
const db = config.get("rh");
console.log(db);

a9a2f8ca7f4d19ebdd6921dceaec3373 增加运行变量

export NODE_ENV=production

在新建一个 production.json

{
  "rh": {
    "base_url": "ronhai.com"
  }
}

config 可以自动合并多个 json 文件配置 67f0c4f856f78c56e6a55ef992227c65

yaml 使用

安装

pnpm add js-yaml

配置文件

default.yaml

token_secrent: secret
rh:
  host: loalhost
  port: 3306
  password: root

production.yaml

rh:
  host: 127.0.0.1
  port: 3311

329ec4c2275e68d47dfcd70c2c3130ee

cross-env

 pnpm add cross-env

更改 package.json

{
  "name": "dynamic_env",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "dev": "cross-env NODE_ENV=development node ./src/index.js",
    "build": "cross-env NODE_ENV=production node ./src/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.10.0",
  "dependencies": {
    "config": "^4.1.1",
    "cross-env": "^10.0.0",
    "dotenv": "^17.2.2",
    "js-yaml": "^4.1.0"
  }
}

运行

pnpm dev

  dynamic_env pnpm dev

> dynamic_env@1.0.0 dev /Users/rh/web/dynamic_env
> cross-env NODE_ENV=development node src/index.js

{ host: 'loalhost', port: 3306, password: 'root' }

@nestjs/config

在 nestjs 中使用环境变量 新建一个 nestjs 的项目,@nestjs/config 内置了 dotenv

 nest new nestjs_config -p pnpm

安装

pnpm add @nestjs/config

nestjs/config

可以使用 ts 的方式来使用配置文件

官方文档库:https://github.com/nestjsx/nestjs-config

joi

是 nestjs 官方推荐的检验库 github 地址://github.com/hapijs/joi#readme

npm 库:https://www.npmjs.com/package/joi

官方文档:https://joi.dev/api/?v=17.13.3

0%