在 vite 中使用环境变量

import.meta.env

console.log(import.meta.env)

• MODE

指明现在处于的模式

• BASE_URL

指明基础 URL

• PROD

当前环境是否是正式环境

• dev

当前环境是否是开发环境

• SSR

是否是 服务端渲染 环境

Production Replacement

在生产环境，会把 import.meta.env 的值转换成对应真正的值

different envs

vite 中自定义环境变量，需要加 VITE_ 前缀

• 根目录创建 .env 文件

  VITE_TITLE=Hello

• 使用

  console.log(import.meta.env.VITE_TITLE)

  .env.development .env.production 可以区分开发环境和生产环境
  .env.development .env.development.local 同一环境可以区分为不同的机器来区分环境

  不同的 mode

  通过 mode 参数来区分环境

• 创建 .evn.test

  VITE_DEMO=test

• package.json 添加脚本命令

  "scripts": {
  "dev": "vite",
  "test": "vite --mode test",
  }

  执行 npm run test 就会执行 test 环境

  vite 识别自定义变量

• src目录下创建 vite-env.d.ts ```javascript ///

interface ImportMetaEnv { VITE_DEMO: string // 自定义的环境变量 } `` 在使用import.meta.env` 时就可以获得对应的代码提示