如何在 vite.config.js 中为 React 项目添加环境变量

Question

如何在 vite.config.js 文件中添加 Vite React 项目中的环境变量

我想在.env文件中添加proxy_url，在部署的时候添加到环境中。 请看下面！

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

const proxy_url = "http://localhost:5000/";

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: proxy_url,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, ""),
      },
    },
  },
});

StackOverflow 上的一些博客和答案，但它们为 Vue 解决了同样的问题。 这些在我的 Vite-React 项目中对我不起作用！

Answer 1

你可以这样使用它：

安装“cross-env” package 并配置 vite

import { defineConfig, loadEnv } from 'vite'

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

  return {
    define: {
      __APP_ENV__: env.APP_ENV,
    },

    // rest of Vite config
  }
}

要在您的代码中使用，您可以这样做：

import.meta.env.VariableName

Answer 2

这会起作用。 获取一个 .env 文件，然后像这样制作你的 vite.config.js 文件

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

 // https://vitejs.dev/config/
 export default defineConfig(({mode})=>{

const env = loadEnv(mode, process.cwd());

 return{
  plugins: [react()],
 build:{
   outDir:"./wwwroot/app/", sourcemap:true
},
 server: {


 port:env.VITE_PORT
  }
 }
})

这是 my.env 文件。 您不必安装任何额外的东西

VITE_PORT=3000

Answer 3

 import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'

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

return{
plugins: [react()],
build:{
   outDir:"./wwwroot/app/", sourcemap:true
 },
  server: {

proxy: {
  "^/api": {
    target:env.VITE_PORT,
    
    changeOrigin: true,
    secure: false,
    withCredentials: true,
    rewrite: (path) => path.replace(/^\/api/, ``),
  },   
   
},
   port:4000
 }
}
})

那么，您可以拨打 api

  async fetchdata(){
     
  await  axios.get(`/api/${mainPage}`,{
 
 }
).then(response=>{})