如何使用Webpack的.env文件配置到Vite？

Question

我最近开始将我的应用程序从 Create React App 迁移到 Vite，但我很难理解如何将 same.env 文件设置复制到 Vite。

在 CRA 中，我使用了 CRACO 和以下配置：

//craco.config.js

const path = require('path')
const webpack = require('webpack')

require('dotenv').config({
  path: path.resolve(__dirname, './.env.' + process.env.APP_ENV),
})

module.exports = {
  webpack: {
    plugins: [
      new webpack.DefinePlugin({
        DEV: process.env.APP_ENV === 'local',
        DOMAIN: JSON.stringify(process.env.API_URL),
      }),
      new webpack.ProvidePlugin({
        React: 'react',
        ReactDom: 'react-dom',
      }),
    ],
  },
}

我有不同环境的 .env 文件：.env.local、.env.development、.env.stage、.env.production

这些文件具有键值对和变量，例如API_URL=https://example.com

为了在 my.JSX 文件中访问它们，我可以这样做：

console.log(DEV, DOMAIN)

我尝试了以下 vite.config.js 来复制与以前相同的设置：

// vite.config.js


import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import EnvironmentPlugin from 'vite-plugin-environment'

export default defineConfig({
  plugins: [
    EnvironmentPlugin({
      DEV: process.env.APP_ENV === 'local',
      DOMAIN: process.env.API_URL,
    }),
    react()
  ],
})

但是当尝试运行 vite 时，出现以下错误：

error when starting dev server:
Error: vite-plugin-environment: the `DOMAIN` environment variable is undefined.

Answer 1

Vite 默认不加载.env文件，所以你也应该从vite模块导入loadEnv

import { defineConfig, loadEnv } from 'vite'

然后加载.env文件：

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd())
  ...
})