官方文档https://cn.vitejs.dev/config/

1. .env.development和.env.production(放在根目录下 
  
  
  
  
  
 ，一定看清楚别放在SRC下)

        默认情况下 
  
  
  
  
  
 ，开发服务器 (dev 命令) 运行在 development (开发) 模式

 


 


 


 


 


 
，而 build 命令则运行在 production (生产) 模式            。

        在某些情况下 
 
 
 
 
 
，若想在 vite build 时运行不同的模式来渲染不同的标题 
   
   
   
   
   
  ，你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式
 
  
 
  
 
  
 
  
 
  
 
  。例如
 

 

 

 

 

 
，如果你想在 staging （预发布）模式下构建应用：

vite build --mode staging

使用vite环境变量命名必须以VITE_开头否则无法识别

.env.development

# 本地环境 NODE_ENV = development #本地环境接口地址 VITE_BASE_URL = https://mock.apifox.cn/m1/2303444-0-default

.env.production

# 生产环境 NODE_ENV = production #生产环境接口地址 VITE_BASE_URL = https://mock.apifox.cn/m1/2303444-0-default

2. vite弃用了process.env改用import.meta.env（vite.config.js中不能使用import.meta.env）

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量











。这里有一些在所有情况下都可以使用的内建变量：

import.meta.env.MODE: {string} 应用运行的模式  
  
  
  
  
  
。

import.meta.env.BASE_URL: {string} 部署应用时的基本 URL 
  
  
  
  
  
 。他由base 配置项决定


 


 


 


 


 


 。

import.meta.env.PROD: {boolean} 应用是否运行在生产环境 
 
 
 
 
 
。

import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)  
   
   
   
   
   
 。

import.meta.env.SSR: {boolean} 应用是否运行在 server 上

 

 

 

 

 

 。

3. vite.config.js中使用环境变量地址进行跨域

环境变量通常可以从 process.env 获得
 

 

 

 

 

 
。

注意 Vite 默认是不加载 .env 文件的
 

 

 

 

 

 
，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个            ，举个例子 

 
 

 
 

 
 

 
 

 
 

 
，root 和 envDir 选项会影响加载行为            。不过当你的确需要时











，你可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件
 

 
 

 
 

 
 

 
 

 
 

 。

js

import { defineConfig, loadEnv } from vite export default defineConfig(({ command, mode }) => { // 根据当前工作目录中的 `mode` 加载 .env 文件 // 设置第三个参数为 来加载所有环境变量                  ，而不管是否有 `VITE_` 前缀











。 const env = loadEnv(mode, process.cwd(), ) return { // vite 配置 define: { __APP_ENV__: env.APP_ENV, }, } })

配置跨域

export default defineConfig(({mode}) => { const env = loadEnv(mode, process.cwd()); return ({ plugins: [vue()], resolve: {}, server: { port: 8088, proxy: { /api: { target:env.VITE_BASE_URL, changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ) } } } }) })