我有一个使用create-react-app
创建的反应应用程序,然后使用命令构建应用程序:npm run build
使用serve
在构建后运行应用程序,如果我们通过运行ENV=production npm run start
启动带有开发代码的应用程序,它可以读取process.env.ENV
变量,因为我正在添加此插件webpack dev config
new webpack.DefinePlugin({
'process.env':{
'ENV': JSON.stringify(process.env.ENV),
}
}),
我还将上面的脚本添加到webpack prod config中,但如果我在构建ENV=prod serve -s build
后尝试此命令,则无法读取环境变量
如何解决这个问题?
答案 0 :(得分:3)
您无法阅读ENV
var的原因是:
(1)在开发模式下webpack
监视您的文件,并即时捆绑您的应用程序。它还将读取(因为DefinePlugin
)您的process.env.ENV
并将其添加为全局变量。所以它基本上是从process.env
到你的JS应用程序的管道变量。
(2)在您构建您的应用(使用webpack
)之后,所有内容都已捆绑到一个或多个文件中。当您运行serve
时,您只需启动一个提供静态构建文件的HTTP服务器。因此,无法将ENV
传送给您的应用。
基本上DefinePlugin
的作用是向捆绑包添加var
。 E.g。
new webpack.DefinePlugin({
'token': '12356234ga5q3aesd'
})
将添加与此类似的行:
var token = '12356234ga5q3aesd';
由于JS文件是 static ,因此之后无法更改此变量,您已使用webpack
构建/捆绑它。基本上,当您执行npm run build
时,您将创建已编译的二进制文件/ .dll
/ .jar
/ ...文件,并且无法再通过插件影响其内容。
答案 1 :(得分:3)
如果您在app.config.js
中设置了所有环境变量,则可以在构建后的 中替换它们在main.????????.chunk.js
文件中。
示例app.config.js
看起来像:
export default {
SOME_URL: "https://${ENV_VAR_1}"
SOME_CONFIGURATION: "${ENV_VAR_2}",
}
将app.config.js
文件保持不变,不将环境变量替换为其实际值。然后,创建优化的生产版本:
npm ci # if not already installed
npm run build
如果使用默认的Webpack配置,则app.config.js
的内容将捆绑在build/static/js/main.????????.chunk.js
中。环境变量的值可以是envsubst,使用如下bash脚本:
main_chunk=$(ls build/static/js/main.*.js)
envsubst <$main_chunk >./main_chunk_temp
cp ./main_chunk_temp $main_chunk
rm ./main_chunk_temp
注意:在上面的示例中,envsubst在运行时读取环境中设置的实际变量,并且 literally 用它们替换${ENV_VAR_1}
和${ENV_VAR_2}
。因此,您只能运行一次,因为该块已被覆盖。
答案 2 :(得分:1)
您可以在项目的根目录中添加一个@Override
protected List<CreateKeyspaceSpecification> getKeyspaceCreations() {
CreateKeyspaceSpecification specification = CreateKeyspaceSpecification.createKeyspace(KEYSPACE);
return Arrays.asList(specification);
}
文件,并在其中定义环境变量。这将是您的默认(生产)环境变量定义。但是随后您可以使用一个名为.env
的本地文件来覆盖默认值。
定义环境变量时,请确保它们以.env.local
开头,以便您的环境变量定义如下所示:
REACT_APP_
此外,请将其添加到.gitignore中,以免提交本地替代:
REACT_APP_SERVER_URL=https://my-awesome-app.herokuapp.com
参考: Adding Development Environment Variables In .env (create-react-app)
答案 3 :(得分:0)
来自create-react-app documentation:
您的项目可以使用环境中声明的变量,就像 它们是在您的JS文件中本地声明的。默认情况下,您将拥有 为您定义的NODE_ENV,以及所有其他环境变量 与REACT_APP _。
您可以在代码内的process.env中读取它们:
render() {
return (
<div>
<small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
<form>
<input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
</form>
</div>
);
}