获取环境变量配置
通过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 上。
.env 文件
在项目根文件下创建 .env 文件，
.env # 所有情况下都会加载 .env.local # 所有情况下都会加载，但会被 git 忽略 .env.[mode] # 只在指定模式下加载 .env.[mode].local # 只在指定模式下加载，但会被 git 忽略
配置环境变量
通过 以VITE_ 前缀 来设置环境变量属性，这样可以防止意外将一些环境变量泄露到客户端。
VITE_KEY=1234234 VITE_API=192.168.98.189
获取环境变量
通过import.meta.env 获取环境变量详细配置,可以在 vite.config.ts 或者 项目 任何地方访问使用。
console.log(import.meta.env) console.log(import.meta.env.MODE) 'test'
输出的内容
如果想要在环境变量中使用 $ 符号，则必须使用 \ 对其进行转义。
VITE_KEY=1234234 VITE_API=192.168.98.189 VITE_http=\$http
TypeScript env 提示
我们可以通过在 src 下 新建一个 env.d.ts 文件，在 interface importMetaEnv 中增加环境变量即可，这样就可以有 提示了。
/// <reference types="vite/client" /> interface ImportMetaEnv { readonly VITE_APP_TITLE: string readonly VITE_TEST_KEY: string // 更多环境变量... }
如果你的代码依赖于浏览器环境的类型，比如 DOM 和 WebWorker，你可以在 tsconfig.json 中修改 lib 字段来获取类型支持。
{ "lib": ["WebWorker"] }
HTML 环境变量替换
Vite 还支持在 HTML 文件中替换环境变量。import.meta.env 中的任何属性都可以通过特殊的 %ENV_NAME% 语法在 HTML 文件中使用：
<p>Using data from %VITE_API_URL% </p>
如果环境变量在 import.meta.env 中不存在，比如不存在的 %NON_EXISTENT%，则会将被忽略而不被替换，这与 JS 中的 import.meta.env.NON_EXISTENT 不同，JS 中会被替换为 undefined。
模式 Mode
默认情况下，开发服务器（dev） 运行在development 开发模式，build 命令运行在production 生产模式.
这意味着当执行 vite build 时，它会自动加载 .env.production 中可能存在的环境变量：
# .env.production VITE_APP_TITLE=My App
指定模式
当启动项目或者构建项目时，我们可以通过指令 指定 当前系统环境，--mode name
yarn dev --mode test yarn build --mode test
需要在根目录下新建一个 为 test 的环境变量文件， .env.test
参考文献：
