tạo ứng dụng phản ứng không chọn tệp .env?

Tôi đang sử dụng ứng dụng tạo phản ứng để khởi động ứng dụng của mình.

Tôi đã thêm hai .envtệp .env.developmentvà .env.productiontrong thư mục gốc.

Của tôi .env.developmentbao gồm:

API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback

Khi tôi chạy ứng dụng của mình bằng cách sử dụng react-scripts startvà giao diện điều khiển, process.envnó sẽ phát ra

{ NODE_ENV: "development", PUBLIC_URL: "" }

Tôi đã thử nhiều thứ khác nhau, nhưng nó chỉ không chọn được các xác minh trong tệp phát triển của tôi, tôi đang làm gì sai ?!

Cấu trúc thư mục là:

/.env.development
/src/index.js

Tập lệnh Package.json là:

"start": "export PORT=3005; npm-run-all --parallel server:start client:start",
    "client:start": "export PORT=3005; react-scripts start",
    "server:start": "node server.js",
    "build": "react-scripts build",

Biên tập:

@jamcreencia chỉ đúng ra biến của tôi nên được bắt đầu với REACT_APP.

Chỉnh sửa 2

Nó hoạt động ổn nếu tôi đặt tên tệp .envnhưng không hoạt động nếu tôi sử dụng .env.developmenthoặc.end.production

Với create-react-app, bạn cần phải thêm tiền tố REACT_APP_vào tên biến để có thể truy cập nó.

Thí dụ:

REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_CALLBACK_URL=http://localhost:3005/callback

Xem thêm thông tin tại đây

Đảm bảo rằng tệp .env của bạn nằm trong thư mục gốc, không phải bên trong thư mục src.

Có cùng một vấn đề này! Giải pháp là đóng kết nối với máy chủ nút của tôi (bạn có thể thực hiện việc này bằng CTRL + C). Sau đó, khởi động lại máy chủ của bạn với 'npm run start' và .env sẽ hoạt động bình thường.

Nguồn: Github

Nếu bạn muốn sử dụng nhiều môi trường như .env.development .env.production

sử dụng gói dotenv-cli

thêm .env.developmentvà .env.productiontrong thư mục gốc của dự án

và package.json của bạn

"scripts": {
    "start": "react-app-rewired start",
    "build-dev": "dotenv -e .env.development react-app-rewired build",
    "build-prod": "dotenv -e .env.production react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"   
},

sau đó xây dựng theo môi trường như

npm run-script build-dev 

Về env-cmd . Theo bài đăng loại của VMois trên gitHub , env-cmd đã được cập nhật (phiên bản 9.0.1 khi viết), các biến môi trường sẽ hoạt động như sau trên dự án React của bạn :

"scripts": {
    "build:local": "env-cmd -f ./.env.production.local npm run build",
    "build:production": "env-cmd -f ./.env.production npm run build"
  }

Trong tệp package.json của bạn .

Đối với mục đích này có mô-đun env-cmd . Cài đặt qua npm npm i env-cmdsau đó trong package.jsontệp của bạn trong scriptsphần:

  "scripts": {
    "start": "env-cmd .env.development react-scripts start",
    "build": "GENERATE_SOURCEMAP=false env-cmd .env.production react-scripts build",
  }

Trong dự án gốc của bạn, bạn phải tạo hai tệp có cùng biến env nhưng có các giá trị khác nhau:

.env.development
.env.production

Sau đó, loại trừ chúng khỏi công khai. Đối với điều này trong .gitignoretệp của bạn, hãy thêm hai dòng:

.env.development
.env.production

Vì vậy, đây là một cách thích hợp để sử dụng các biến env khác nhau cho dev và prod.

Tôi cũng gặp sự cố tương tự, nhưng đó là do tôi có tệp .env ở định dạng YAML thay vì JS.

Nó đã

REACT_APP_API_PATH: 'https://my.api.path'

nhưng nó cần phải

REACT_APP_API_PATH = 'https://my.api.path'

Nếu .envtập tin hoạt động nhưng .env.developmenthay .env.productionkhông, sau đó tạo ra một sản phẩm nào .envtập tin bên cạnh những hai. Tôi không biết tại sao nhưng điều này hiệu quả với tôi.

Và hãy nhớ không có dấu chấm phẩy sau khóa API trong tệp env.

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

nên là

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

đó là lỗi của tôi

Đối với các kịch bản phản ứng mới nhất (3.2.0), nó đơn giản như nói

PORT=4000
BROWSER=none

trong tệp .env hoặc .env.development (..etc) của bạn được cho là nằm trong thư mục gốc.

Nó sẽ KHÔNG hoạt động với tiền tố REACT_APP sau đó (tôi đoán là tài liệu đã lỗi thời) và nó KHÔNG yêu cầu bất kỳ gói npm bổ sung nào (các tập lệnh phản ứng đã bao gồm dotenv 6.2.0)