Vue.js中如何正确实现含3种环境判断的多条件分支赋值逻辑？

你写的多条件分支失效的核心原因是第二个判断分支缺失完整判断条件，三元表达式的每个判断分支都需要明确的判定逻辑，你省略了process.env.NODE_ENV == "production"的写法，自然无法正常匹配生产环境的判断。

方案1：修正嵌套三元表达式 #

如果要继续使用三元表达式实现多条件判断，修正后的可运行代码如下：

{
  accessToken:
    process.env.NODE_ENV == "staging" 
      ? "TY8ljH8FVyeYAfX0F7Qkfwttstaging"
      : process.env.NODE_ENV == "production"
        ? "ZkIEqD1i8FVF628krYkPhAtt"
        : "nroV5bOcaS2CHUosOINLJgtt",
  cacheProvider: "memory"
}

方案2：更推荐的对象映射写法（扩展性、可读性更强） #

嵌套三元超过2层就会大幅降低代码可读性，后续新增环境还要继续嵌套判断，更推荐用对象映射的方式实现，后续新增环境只需要在映射对象中新增对应键值对即可，不需要修改判断逻辑：

// 提前定义不同环境对应的token映射
const TOKEN_MAP = {
  staging: "TY8ljH8FVyeYAfX0F7Qkfwttstaging",
  production: "ZkIEqD1i8FVF628krYkPhAtt",
  development: "nroV5bOcaS2CHUosOINLJgtt"
}

// 配置中直接按环境取值即可，还可以加兜底逻辑避免未知环境报错
const config = {
  accessToken: TOKEN_MAP[process.env.NODE_ENV] ?? TOKEN_MAP.development,
  cacheProvider: "memory"
}

这种写法的优势非常明显：

• 逻辑直观，所有环境对应的取值一目了然
• 扩展性强，后续新增测试、预发等环境，只需要在TOKEN_MAP中加一行键值对即可
• 避免多层嵌套判断带来的语法错误和维护成本

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