如何在.env文件中定义对象数组？Angular解析JSON报错如何解决

错误原因 #

dotenv解析.env文件时，会默认处理字符串内的特殊字符，如果你没有按规则编写JSON格式的环境变量，会导致双引号被转义、或者多余符号被带入变量值，最终JSON.parse识别到异常结构，就会报逗号、括号相关的语法错误。

正确配置步骤 #

1. 调整.env文件的变量写法 #

二选一即可：

• 方案A：手动转义内部双引号，不要加外层单引号

ENV_VARIABLE=[{\"key1\":\"value1\", \"key2\":\"value2\"},{\"key1\":\"value1\", \"key2\":\"value2\"}]

• 方案B：用单引号包裹整个JSON串，内部双引号保留（dotenv原生支持该写法，不易出错）

ENV_VARIABLE='[{"key1":"value1", "key2":"value2"},{"key1":"value1", "key2":"value2"}]'

2. 适配Angular环境变量规则 #

如果你用的是Angular CLI原生支持的客户端环境变量，变量名必须加NG_APP_前缀，否则变量不会被注入到前端运行环境，读取到的会是undefined，也会导致解析失败：

NG_APP_ENV_VARIABLE='[{"key1":"value1", "key2":"value2"},{"key1":"value1", "key2":"value2"}]'

3. 代码中解析变量 #

读取到环境变量后直接用JSON.parse解析即可：

// 读取变量
const jsonStr = process.env['NG_APP_ENV_VARIABLE'] as string;
// 解析为对象数组
const configArr = JSON.parse(jsonStr);

避坑提示 #

• 不要在.env的JSON变量值中加多余的换行、制表符，避免dotenv解析时截断字符串
• 不要在TS文件的环境变量定义中额外套引号，直接读取.env传入的原始字符串即可

内容的提问来源于stack exchange，提问作者Max Rojas