官方文档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/, '')}}}})})