如果您遇到此问题并且正在使用 webpack，则可以通过在 webpack.config.js 中使用 DefinePlugin 将所需的 process 数据注入客户端包。
在下面的示例中，我展示了如何向 process.env 对象添加一些内容以在浏览器中使用：
-
.env里面的所有环境变量使用库
dotenv
-
NODE_ENV 的值，即'development' 或'production'
工作示例
# .env
API_KEY=taco-tues-123
API_SECRET=secret_tacos
// webpack.config.js
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),
}
// Within client side bundle (React)
// src/App.jsx
console.log(process.env) // {API_KEY: "taco-tues-123", API_SECRET: "secret_tacos"}
console.log(process.env.NODE_ENV) // development
请注意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),
}
// Within client side bundle (React)
// src/App.jsx
console.log(process.env) // Uncaught ReferenceError: taco is not defined
console.log(process.env.NODE_ENV) // development
来自 webpack DefinePlugin docs:
在定义进程首选值时的警告
'process.env.NODE_ENV': JSON.stringify('production')
结束
process: { env: { NODE_ENV: JSON.stringify('production') } }
使用后者
将覆盖可能破坏兼容性的进程对象
一些期望进程对象上的其他值的模块
已定义。
！警告！
如前所述，将dotenv.parsed 注入客户端包中会将这些秘密暴露给客户端。出于开发目的，没什么大不了的，但在部署的生产环境中，任何寻找密码或 API 私钥的人都可以看到它们。