我設定了一個助手來訪問我的 process.env，如下所示：
export const env = (key: string, def: any = null): string|any => {
console.log(process.env["APP_ENV"], process.env[key], key === "APP_ENV")
// @ts-ignore
if ( process.env[key] instanceof String && process.env[key].length) {
return process.env[key]
}
return def
}
這將通過插件注入到我的所有模塊中：
plugins: [
new Dotenv(),
new webpack.ProvidePlugin({
env: ['./plugins/config_helper', 'env'],
})
]
當我env("APP_ENV")從除錯列印中得到令人困惑的結果時訪問它。
develop undefined true
有人可以解釋這種行為嗎？更具體地說，為什么 process.env 在我通過變數訪問它時會產生 undefined ？
uj5u.com熱心網友回復：
對于問題的部分原因，請查看以下答案：https ://stackoverflow.com/a/66626413/1882663
下面是我在我的應用程式中使用的解決方案，請注意我正在REACT_APP_為我的所有 env 變數使用前綴。
webpack.config.js：
require('dotenv').config()
const getReactEnvs = () => {
const envs = {}
Object.keys(process.env).forEach(env => {
if(env.startsWith('REACT_APP_')) envs[env] = process.env[env]
})
return envs
}
module.exports = [
new ProvidePlugin({
process: 'process/browser',
}),
new DefinePlugin({
'process.env': JSON.stringify({ ...getReactEnvs() }),
}),
]
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/477937.html