为什么npm-start会忽略我的.env.development文件?

Question

我有一个使用create-react-app的React 18应用程序。我使用Visual Studio代码为我的ide。我有两个。env文件在我的根文件夹(不在我的scr文件夹)。它们都持有相同的环境变量。

在我的。env文件中，我将变量的值设置为false:

REACT_APP_IS_CONSOLELOG=false

在我的.env.development文件中，我将变量的值设置为true:

REACT_APP_IS_CONSOLELOG=true

然后在新的终端中使用npm-start在Visual Studio代码中启动应用程序。在我的*里。我将以下内容输出到控制台:

console.log(process.env);
console.log(process.env.REACT_APP_IS_CONSOLELOG);

对于第一个语句，我看到这样:

{NODE_ENV: 'development'， PUBLIC_URL: "， WDS_SOCKET_HOST:未定义，WDS_SOCKET_PATH:未定义，WDS_SOCKET_PORT:未定义，…}

对于第二个语句，我看到&;false.&;我期待看到"真实"。对于第二个表述。React正在从我的". environment "中读取环境变量。文件，而不是从我的". envy .development"文件。我做错了什么?当我在本地主机上运行应用程序时，我希望React使用来自我的。env.development文件的环境变量，而不是来自我的。env文件。

根据https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env上的React文档，我的设置应该可以工作。

根据文档中的链接，我看到了安装"dotenv"的说明，我照做了，但它仍然不能工作。

这是我的包裹。Jason dependencies看起来像:

"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.11.64",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"dotenv": "^16.0.3",
"jest-editor-support": "^30.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-query": "^3.39.2",
"typescript": "^4.8.4",
"uuid": "^9.0.0",
"web-vitals": "^2.1.4"
},

这是我的包裹。Json脚本看起来像;在"开始";设置我正在加载本地ssl证书，然后调用"react-scripts start"

"scripts": {
"start": "set HTTPS=true&&set SSL_CRT_FILE=C:/Users/MyName/Documents/Certificates/cert.crt&&set SSL_KEY_FILE=C:/Users/MyName/Documents/Certificates/cert.key&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

Answer 1

在package.json中的" scripts "设置的" react-scripts start "命令中添加" .env.development " .

" scripts "的设置应该是这样的:

"scripts": {
"start": "set HTTPS=true&&set SSL_CRT_FILE=C:/Users/MyName/Documents/Certificates/cert.crt&&set SSL_KEY_FILE=C:/Users/MyName/Documents/Certificates/cert.key&&react-scripts start .env.development",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

从依赖设置中删除" dotenv "，它是多余的。