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

Question

我最近开始将我的应用程序从 Create React App 迁移到 Vite，但我很难理解如何将相同的 .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.生产

这些文件具有带有变量的键值对，例如

API_URL=https://example.com

为了在我的 .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

文件，因此您还应该从

loadEnv

模块导入

vite

import { defineConfig, loadEnv } from 'vite'

然后加载

.env

文件：

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

Answer 2

您可以通过安装 dotenv 来完成

或

只要这样就可以了

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

export default defineConfig(({ command, mode }) => { 
  const { VITE_APP_ENV, VITE_JTI_API, VITE_GOOGLE_ACCOUNT, VITE_GOOGLE_TAG_MANAGER, VITE_GOOGLE_OPTIMIZE, VITE_BLOB_HOST } = loadEnv(mode, process.cwd());

  return {
    plugins: [
      react(),
      EnvironmentPlugin({
        DEV: VITE_APP_ENV === 'local',
        DOMAIN: VITE_JTI_API,
        GAA: VITE_GOOGLE_ACCOUNT,
        GTM: VITE_GOOGLE_TAG_MANAGER,
        GO: VITE_GOOGLE_OPTIMIZE,
        BlobHost: VITE_BLOB_HOST,
      }),
    ],
  };
});