在vite中配置并使用环境变量

1、配置环境变量，注意 要以“VITE“开头

（1）在.env.development中配置环境变量

?

1	VITE_APP_ENV= development

2、在vue文件中使用

?

1 2 3

<script setup lang="ts"> 　　console.log('环境：', import.meta.env) </script>

　　打印得结果：

?

1 2 3 4 5 6 7 8 9

{     "BASE_URL": "/",     "DEV": true,     "MODE": "development",     "PROD": false,     "SSR": false,     "VITE_APP_ENV": "development",     "VITE_USER_NODE_ENV": "development" }

　3、在vite.config.ts中使用

?

1 2 3 4 5 6 7 8

export default ({command,mode}) => {   console.log("🚀 ~ mode:", mode)   console.log("🚀 ~ command:", command)   console.log(loadEnv(mode, process.cwd()))   return  defineConfig({        }) }

　　控制台打印结果：

 4、在main.ts中使用

?

1	console.log(' import.meta.env.MODE: ',  import.meta.env.MODE);