如何在Vite中使用vite.config.js文件中的环境变量进行代理

Question

我尝试访问 vite.config.js 文件中的环境变量，但使用 import.meta.env.ENV_VARIABLE_NAME 时出现错误。

我有一个 vite.config.js 文件，我在其中使用代理。下面给出了相同的代码。

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

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    proxy:{
      '/api':{
        target: 'http://localhost:3000'
      }
    }
  },
  plugins: [react()],
})

现在我想将目标后端 url 添加为环境变量。我创建了一个 .env 文件并添加了一个名为 VITE_BACKEND_API_URL='http://localhost:3000' 的环境变量。但我无法通过 import.meta.env.VITE_BACKEND_API_URL 在 vite.config 文件中访问它。

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

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    proxy:{
      '/api':{
        target: import.meta.env.VITE_BACKEND_API_URL
      }
    }
  },
  plugins: [react()],
})

这是终端上的错误

failed to load config from C:\Users\admin\Desktop\Frontend\vite.config.js
error when starting dev server:
TypeError: Cannot read properties of undefined (reading 'VITE_BACKEND_API_URL')

请帮助我。

Answer 1

import { loadEnv } from 'vite';

const env = loadEnv(process.env.NODE_ENV as string, process.cwd(), 'VITE_');

export default defineConfig({
  server:{
    proxy:{
      '/api':{
        target: env.VITE_BACKEND_API_URL
      }
    }
  }
})