Saya sedang membina aplikasi tindanan penuh pertama saya menggunakan React dan Node. Projek ini mempunyai direktori akar dengan folder klien (untuk subprojek React) dan folder pelayan (untuk subprojek Node). Saya baru-baru ini telah memindahkan projek React saya daripada create-react-app ke Vite.
Saya mahu kedua-dua bahagian hadapan dan bahagian belakang dapat membaca port pelayan, port klien dan URL asas (yang merupakan localhost buat masa ini) daripada satu fail .env dalam keseluruhan akar projek untuk mengelakkan nilai pengekodan keras untuk ini.
Mempunyai dua fail .env berasingan untuk klien dan pelayan nampaknya mudah kerana Vite boleh membaca daripada fail .env dalam direktori klien dan Node boleh membaca daripada fail .env dalam direktori pelayan. < /p>
Bagaimana untuk membolehkan projek menggunakan fail .env dalam direktori akar? Adakah amalan yang baik/standard untuk menggunakan satu fail .env dan bukannya dua?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya menemui penyelesaian yang tidak kemas, mungkin seseorang boleh mencadangkan penyelesaian yang lebih bersih.
import { defineConfig, loadEnv } from "vite"; import react from "@vitejs/plugin-react"; import path from "path"; export default ({ mode }) => { process.env = { ...process.env, ...loadEnv(mode, path.resolve(__dirname, "../")) }; return defineConfig({ plugins: [react()], envDir: "../", server: { port: process.env.VITE_CLIENT_PORT, } }) }Saya juga menambah atribut
envDirpada fail (ditunjukkan di atas) untuk mengkonfigurasi Vite/React untuk membaca pembolehubah persekitaran daripada direktori akar dan bukannya direktori klien.Kini, dalam projek React saya, saya boleh menggunakan pembolehubah persekitaran seperti ini:
import.meta.env.VITE_SERVER_PORTUntuk menggunakan pembolehubah env dalam projek Nod saya, saya menggunakan dotenv seperti ini (sambil mengkonfigurasi laluan .env):
const express = require('express'); require('dotenv').config({ path: '../.env' }); const app = express(); app.listen(process.env.VITE_SERVER_PORT, () => { console.log(`Server running on port ${process.env.VITE_SERVER_PORT}`); })