为何Node环境变量作为函数默认参数时失效？

核心原因：构建阶段的静态替换差异 #

在Vue项目中，通常用webpack的DefinePlugin将process.env.*静态替换为实际环境变量值，这是导致两段代码行为不一致的关键：

1. 第一段代码（正常运行）

function func() {
  console.log(process.env.myVar)
}

webpack在构建时会直接识别并替换代码中的process.env.myVar为具体值（比如'production'），最终打包后的代码类似：

function func() {
  console.log('production')
}

因此无论何时调用，都能输出正确值。

2. 第二段代码（返回undefined）

function func(myVar = process.env.myVar) {
  console.log(myVar)
}

如果这段代码未被webpack的静态替换逻辑覆盖（比如定义在未被webpack处理的HTML全局<script>标签中，或者webpack的静态分析未识别到默认参数位置的process.env.myVar），打包后代码会保留原表达式。而浏览器环境本身没有process对象，此时访问process.env.myVar会返回undefined；即使项目手动注入了process对象但未正确设置myVar，结果同样是undefined。

额外可能：求值时机与环境初始化顺序 #

如果项目是在运行时动态注入process.env.myVar（比如在Vue的main.js中手动设置window.process.env.myVar）：

• 第一段函数在调用时（Vue初始化后）才访问process.env.myVar，此时变量已被注入，能拿到值。
• 第二段函数的默认参数若因旧版babel编译等逻辑被提前在函数定义时求值，而此时process.env.myVar尚未被注入，就会导致默认值为undefined。

解决方法 #

• 确保函数代码在webpack处理范围内（比如写在Vue组件或项目JS模块中），让DefinePlugin能替换默认参数中的process.env.myVar。
• 若必须在HTML全局脚本中定义函数，可提前将环境变量挂载到全局：

  // 在Vue初始化后执行
  window.myEnvVar = process.env.myVar;
  
  // 全局函数
  function func(myVar) {
    myVar = myVar || window.myEnvVar;
    console.log(myVar)
  }
  

• 显式在函数内部获取环境变量，避免依赖默认参数：

  function func(myVar) {
    if (myVar === undefined) {
      myVar = process.env.myVar;
    }
    console.log(myVar)
  }
  

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