vite环境变量的配置
发布时间：2023-09-10 12:30
vite环境变量总共须配置三个文件，其中.env.development文件(npm run dev时自动启用该文件)和.env.production(npm run bulid时自动启用该文件)文件为必须。env.d.ts文件为非必须，该文件主要用作ts代码的智能提示使用。
新增三个文件目录结构：
![\"vite环境变量的配置_第1张图片\"](\"https://img.it610.com/image/info8/d7a20c95cf704791b0c0cda8fa9b901a.jpg\")
.env.development文件：
# 只在开发模式中被载入
VITE_APP_BASE_API = \'/api/admin/\'
VITE_APP_VUE_API = \'123\'
VUE_API = \'789\'.env.production文件：
# 只在生产模式中被载入
VITE_APP_BASE_API = \'https://www.baidu.com/\'
VITE_APP_VUE_API = \'456\'
VUE_API = \'101112\'env.d.ts文件：
// 环境变量变量声明
interface ImportMetaEnv {
readonly VITE_APP_BASE_API: string
readonly VITE_APP_VUE_API: string
readonly VUE_API: string
}
注意：只有以 VITE_ 开头的变量才会被识别，并启用。
使用：
![\"vite环境变量的配置_第2张图片\"](\"https://img.it610.com/image/info8/6a59e544d79a4ef58b2d5c7b2a67e31d.jpg\")
VUE_API无法找到：
![\"vite环境变量的配置_第3张图片\"](\"https://img.it610.com/image/info8/c387b75281fc409f93e15a65aab1c741.jpg\")
新增环境配置
.env.staging文件中内容同上
![\"vite环境变量的配置_第4张图片\"](\"https://img.it610.com/image/info8/9d84cf4dcda545ccae5130af40fc2a6b.jpg\")
package.json中配置：
![\"vite环境变量的配置_第5张图片\"](\"https://img.it610.com/image/info8/a42f005f3c714e089c77deb1e8be9423.jpg\")