如果您遇到此问题并且正在使用webpack,则可以通过在
webpack.config.js
中使用
DefinePlugin
将所需的
process
数据注入客户端包来解决。
下面的示例展示了如何添加几个内容到
process.env
对象中,以便在浏览器中使用:
- 使用库dotenv获取
.env
中的所有环境变量
NODE_ENV
的值,它是'development'
或'production'
工作示例
API_KEY=taco-tues-123
API_SECRET=secret_tacos
const dotenv = require('dotenv').config({ path: __dirname + '/.env' })
const isDevelopment = process.env.NODE_ENV !== 'production'
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed),
'process.env.NODE_ENV': JSON.stringify(isDevelopment ? 'development' : 'production'),
}),
].filter(Boolean),
}
console.log(process.env)
console.log(process.env.NODE_ENV)
请注意,
console.log(process.env)
仅具有
.env
文件中的值,并且
NODE_ENV
不是
process.env
对象的一部分。
在下面的示例中,我展示了如何尝试注入
process.env
对象,这导致了这个堆栈溢出。我还从webpack文档中提取了一个重点,解释了为什么下面的代码无法工作。
损坏的示例
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env': {
...dotenv.parsed,
'NODE_ENV': JSON.stringify(isDevelopment ? 'development' : 'production')
}
}),
].filter(Boolean),
}
console.log(process.env)
console.log(process.env.NODE_ENV)
来自webpack DefinePlugin文档:
警告:在定义process的值时,优先使用
'process.env.NODE_ENV': JSON.stringify('production')
而不是
process: { env: { NODE_ENV: JSON.stringify('production') } }
使用后者将覆盖process对象,可能会破坏某些模块对process对象的其他值的兼容性。
!警告!
按照描述将dotenv.parsed
注入客户端包将向客户端公开这些机密。 对于开发目的,这并不是大问题,但在部署的生产环境中,任何密码或私有API密钥都将对寻找它们的任何人可见。