https://cn.vitejs.dev/guide/env-and-mode#env-variables-and-modes
添加额外的环境变量
.env
#标题
VITE_APP_TITLE='Vite App'
#端口
VITE_PORT=5173
#是否自动打开浏览器
VITE_OPEN=true.env.development
#开发环境端口
VITE_PORT=8848
#是否删除console打印日志
VITE_DROP_CONSOLE=false.env.production
#是否删除console打印日志
VITE_DROP_CONSOLE=true
在Node环境中读取ENV
Vite提供loadEnv，可以读取指定的或者所有的环境变量;
默认时VITE_前缀，你也可以修改， 通过envPrefix: https://cn.vitejs.dev/config/shared-options.html#envprefix
vite.config.ts
import { defineConfig, ConfigEnv, UserConfig, loadEnv } from 'vite'
import { wrapperEnv } from './build/getEnv.ts'export default defineConfig(({command, mode}: ConfigEnv):UserConfig => { const root = process.cwd();// 默认读取node环境变量// console.log(process.env)// mode 表示当前情景 root表示项目根路径，'' 表示前缀，''默认读取所有的环境变量const env = loadEnv(mode, root, 'VITE_')console.log(env);const viteEnv = wrapperEnv(env);return {root,server: {port:viteEnv.VITE_PORT,open:viteEnv.VITE_OPEN},esbuild: {pure:viteEnv.VITE_DROP_CONSOLE ? ['console.log','debugger'] : []}}
})build/getEnv.ts
type Recordable<T = any> = Record<string, T>;export function wrapperEnv(envConfig: Recordable):ViteEnv { const ret: any = {};for (const envName of Object.keys(envConfig)) { let realName = envConfig[envName].replace(/\\n/g, '\n');realName = realName === 'true' ? true : realName === 'false' ? false : realName;if (envName === 'VITE_PORT') { realName = Number(realName);}ret[envName] = realName;}return ret;
}
src/vite-env.d.ts
https://cn.vitejs.dev/guide/env-and-mode.html#intellisense
declare interface ViteEnv { VITE_APP_TITLE: stringVITE_PORT: numberVITE_OPEN: booleanVITE_DROP_CONSOLE: boolean
}//定义映射类型，将属性设置为只读
type ReadonlyProps<T> = {readonly [P in keyof T]: T[P]
}interface ImportMetaEnv extends ReadonlyProps<ViteEnv>{
}interface ImportMeta {readonly env: ImportMetaEnv
}
在浏览器环境中使用ENV
console.log(import.meta.env.VITE_APP_TITLE)
