Vue-cli项目中，如何只插入process.env.VUE_APP_xx 参数，而不是插入全部参数
.env文件：
极客观点
项目管理
HarmonyOS
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')
}
AI BotBETA在Vue CLI项目中，环境变量是通过DefinePlugin插件处理的，它会在编译时将这些变量替换为对应的值。默认情况下，所有以VUE_APP_开头的环境变量都会暴露给客户端代码，即使这些变量在代码中并未被直接使用。
要解决这个问题，你可以考虑以下几种方法：
.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文件。
DefinePlugin配置如果你想要更细粒度的控制，你可以直接修改webpack配置来定制DefinePlugin的行为。然而，在Vue CLI项目中，直接修改webpack配置通常是不推荐的，因为这可能会导致与Vue CLI的内部配置发生冲突。但是，你可以通过vue.config.js来扩展webpack配置。
不过，需要注意的是，Vue CLI已经处理了VUE_APP_前缀的环境变量，并且直接修改DefinePlugin来排除某些变量可能不是一个简单的任务。
虽然这可能不是最优雅的解决方案，但你可以考虑在代码中手动处理环境变量。例如，你可以创建一个函数来检查特定的环境变量是否存在，并只在需要时读取它：
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打包后的代码结构；它只是在运行时代码中动态地检查环境变量。
最后，考虑使用专门用于存储和管理敏感环境变量的工具，如HashiCorp Vault、AWS Secrets Manager或Azure Key Vault等。这些工具允许你安全地存储和管理敏感数据，并在需要时通过API或命令行工具进行检索。这样，你就可以避免在客户端代码中直接暴露敏感信息。
2 回答1.5k 阅读✓ 已解决
5 回答1.9k 阅读
1 回答1.6k 阅读✓ 已解决
1 回答2.8k 阅读
2 回答1.3k 阅读
2 回答466 阅读✓ 已解决
1 回答1.5k 阅读
可是不管怎么样你就算在不使用webpack也会泄漏,而且一般都是不建议敏感信息在前端配置,一旦数据在前端使用,你就要做好准备他就是明文的存在,实在不行,你可以增加一些代码混淆的策略进行打包操作,可以增加代码破译难度