我正在构建一个React 16.13.0应用程序,我想根据环境不同地配置端点,所以我在一个组件src/containers/FormContainer.jsx中设置了这个功能,..
class FormContainer extends Component {
static DEFAULT_COUNTRY = 484
static REACT_APP_PROXY = process.env.REACT_APP_PROXY
...
我想在本地生成用于生产的项目,但是我在本地定义了这个变量
localhost:client davea$ echo $REACT_APP_PROXY
http://localhost:9090
在我运行“npm run-script build”之后,我注意到这个编译到了我的构建文件中...
(function(e){return e.json()})).then((function(t){console.log(t),n=t.map((function(e){return e})),e.setState({provinces:n})}))}}]),t}(n.Component);S.DEFAULT_COUNTRY=484,S.REACT_APP_PROXY="http://localhost:9090"
有没有什么方法可以让React不自动解析env变量,而是从生产环境中获取它?也许我需要调整我的构建脚本?下面是我的package.json文件中定义的内容...
localhost:client davea$ cat package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^7.2.1",
"bootstrap": "^4.4.1",
"jquery": "^1.9.1",
"react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.17",
"react-dom": "^16.12.0",
"react-native-flash-message": "^0.1.15",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.1",
"typescript": "^3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"proxy": "http://localhost:8000",
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
5条答案
按热度按时间mrphzbgm1#
您正在使用react-scripts构建应用程序。您可以在.env文件中定义环境变量。
对于在节点环境中通用的变量,可以在.env文件中定义它们
对于特定于
development
和production
的变量,可以在.env.development
和.env.production
文件中定义它们另外,请使用
REACT_APP
作为变量的前缀完成此操作后,可以在package.json中添加脚本,以指定特定
NODE_ENV
的构建版本然后您可以构建本地生产应用程序,例如
它将使用生产环境变量
在create react app documentation上阅读更多信息
z4iuyo4d2#
您也可以参考原始文件了解更多信息:
Adding Custom Environment Variables
在项目根目录下创建
.env
文件创建
.env
文件后的项目结构:.env
文件内部:(例如)需要前缀REACT_APP_
!**Scripts
无需在package.json
文件中进行更改:最后,可以有条件地使用所创建的变量。
process.env
是您的环境通过NodeJs提供的全局对象。因为我们的浏览器中没有NodeJS。但您可以使用create-react-app
(默认包含webpack
)初始化您的应用,然后执行上述步骤,从而访问NODE_ENV
。更多详细信息如下:有一个名为
NODE_ENV
的内置环境变量。您可以从process.env.NODE_ENV
访问它。此变量根据您当前所处的模式而变化。当您运行npm start
时,它等于development
,当您运行npm test
时,它等于test
。当你运行npm run build
时,它等于production
。这个变量是特殊的,因为它可以用来根据你的模式访问不同的环境配置。txu3uszq3#
对于任何其他人有这个问题,但接受的答案不成功,试试这个。
1.安装env-cmd
1.在你的package.json中,像这样设置你的build命令中的env:
"build:staging": "env-cmd -f .env.<ENV_NAME> react-scripts build",
请注意,请确保项目的根目录中存在名为
.env.<ENV_NAME>
的文件ljsrvy3e4#
尝试
2jcobegt5#
安装“env-cmd”软件包
npm install --save-dev env-cmd
更新包.json
运行、启动或生成您想要的环境