React + Vite 配置 .env 文件

今天，我将使用 Vite 创建 React 应用程序，因为他在构建和运行 Web 应用程序以及初始化环境变量方面具有良好的性能。

首先创建项目：

$ npm create vite@latest 
#或
$ yarn create vite 
#或
$ pnpm create vite

安装依赖项：

$ cd my-project 

$ npm install 
#或
$ yarn 
#或
$ pnpm install

添加 .env 依赖：

$ npm install dotenv 
#或
$ yarn add dotenv 
#或
$ pnpm install dotenv

在 my-project 的主目录中创建'.env'文件：

$ touch .env

.环境变量：

API_URL =http://localhost:3030

编辑 'vite.config.ts' 文件

import dotenv from 'dotenv';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

dotenv.config();
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      src: '/src',
    },
  },
  define: {
    'process.env': process.env,
  },
  server: {
    proxy: {
      '/api': {
        target: process.env.API_BASE_URL,
        changeOrigin: true,
      },
    },
  },
});

现在您可以在项目中使用环境变量

// process.env. [环境变量]
console.log(process.env.API_URL)