首先在全局目录中新建.env.development文件和.env.production文件、.env.test文件
.env.development文件
VITE_MODE_NAME='development'
VITE_API_URL="http://xxxxxxxxxx"
注意：必须要以VITE_ 去开头，否则获取不到
依次去配置.env.production文件、.env.test文件
然后在vite.config.ts文件中获取环境变量
import { defineConfig ,loadEnv } from 'vite'
export default defineConfig(({ command,mode }) => {
const env = loadEnv(mode, process.cwd()); //重点！！！！
console.log("当前环境", env);
})
配置package.json
"scripts": {
"dev": "vite serve",
"build:dev": "vite build ",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --noEmit",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"build:test": "vite build --mode test",
"test": "vite serve --mode test",
"build:prod": "vite build --mode production",
"prod": "vite serve --mode production"
},
通过启动、打包命令去调整你需要哪个环境