怎么防止webpack打包Vue项目时泄露未使用的环境变量？

Question

Vue-cli项目中，如何只插入process.env.VUE_APP_xx 参数，而不是插入全部参数

.env文件：
`VUE_APP_MENU = '1'
VUE_APP_MAP_KEY = '123456'
`

index.js：

if(process.env.VUE_APP_MENU=='1'){
console.log('test')
}

webpack打包后的结果：

let l=Object({NODE_ENV:"production",VUE_APP_MENU:"1",VUE_APP_MAP_KEY:"123456"
if(l.VUE_APP_MENU=='1'){
  console.log('test')
}

webpack打包会插入全部的VUE_APP_参数，即便没有使用，这会导致在入口js泄露一些参数如地图的key：VUE_APP_MAP_KEY。如何配置才能得到下方打包结果？

if("1"=='1'){
  console.log('test')
}

Answer 1

在Vue CLI项目中，环境变量是通过DefinePlugin插件处理的，它会在编译时将这些变量替换为对应的值。默认情况下，所有以VUE_APP_开头的环境变量都会暴露给客户端代码，即使这些变量在代码中并未被直接使用。

要解决这个问题，你可以考虑以下几种方法：

1. 使用.env文件的不同变体

Vue CLI支持.env、.env.local、.env.[mode]和.env.[mode].local四种文件来定义环境变量，其中[mode]是运行Vue CLI命令时指定的模式（例如development、production）。你可以在不同的模式下设置不同的环境变量，从而避免在打包后的代码中暴露所有变量。

例如，你可以在.env.production文件中只设置需要用于生产环境的变量：

VUE_APP_MENU = '1'
# VUE_APP_MAP_KEY 不在此处设置

然后，当你运行vue-cli-service build命令时，Vue CLI会自动加载.env.production文件。

2. 使用webpack的DefinePlugin配置

如果你想要更细粒度的控制，你可以直接修改webpack配置来定制DefinePlugin的行为。然而，在Vue CLI项目中，直接修改webpack配置通常是不推荐的，因为这可能会导致与Vue CLI的内部配置发生冲突。但是，你可以通过vue.config.js来扩展webpack配置。

不过，需要注意的是，Vue CLI已经处理了VUE_APP_前缀的环境变量，并且直接修改DefinePlugin来排除某些变量可能不是一个简单的任务。

3. 在代码中手动处理环境变量

虽然这可能不是最优雅的解决方案，但你可以考虑在代码中手动处理环境变量。例如，你可以创建一个函数来检查特定的环境变量是否存在，并只在需要时读取它：

function getEnvVar(key) {
  // 假设你有一个安全的方式来获取环境变量（这取决于你的构建环境和工具链）
  // 在这个例子中，我们只是简单地返回process.env中的值（这不适用于生产环境）
  if (process.env.hasOwnProperty(key)) {
    return process.env[key];
  }
  // 返回一个默认值或抛出错误
  return null; // 或 throw new Error(`Environment variable ${key} is not defined`);
}

if (getEnvVar('VUE_APP_MENU') === '1') {
  console.log('test');
}

然而，请注意，这种方法并不会改变webpack打包后的代码结构；它只是在运行时代码中动态地检查环境变量。

4. 使用安全的环境变量存储和管理工具

最后，考虑使用专门用于存储和管理敏感环境变量的工具，如HashiCorp Vault、AWS Secrets Manager或Azure Key Vault等。这些工具允许你安全地存储和管理敏感数据，并在需要时通过API或命令行工具进行检索。这样，你就可以避免在客户端代码中直接暴露敏感信息。