vite+vue3+typescript的env变量使用方法

env环境变量

vite在import.meta.env 对象上暴露环境变量。固定的环境变量有

• import.meta.env.MODE: string类型，应用运行的模式，通过 vite --model dev 或者 vite build --model prod 指定
• import.meta.env.BASE_URL: string类型，由base配置项决定
• import.meta.env.PROD: boolean，应用是否运行在生成环境
• import.meta.env.DEV: boolean，应用是否运行在开发环境

.env 文件

vite从下列文件加载额外的环境变量

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

加载的环境变量通过import.meta.env暴露给客户端源码

.env 文件目录

通过envDir配置项配置，如果不配置，默认是跟vite.config文件所在同目录

{
    plugins: [vue() ],
    envDir: './env',
    ...
  };

env前缀

为了防止意外地将一些环境变量泄露到客户端，只要以VITE_为前缀的变量才会暴露给经过vite处理的代码，例如

APP=demo
VITE_KEY=123

只有VITE_KEY会被暴露为 import.meta.env.VITE_KEY提供给客户端源码，而APP不会。
当然也可以自定义env变量的前缀，使用envPrefix配置项

{
    plugins: [vue() ],
    envDir: './env',
    envPrefix: ['VITE_','DZ_'],
    build:{
      manifest: true
    }
  };

添加配置项后，一下配置内容

APP=demo
VITE_KEY=123
DZ_API=http://www.baidu.com

VITE_KEY和DZ_API都会通过import.meta.env暴露

vite.config中使用env

根据不同的mode，生成文件到不同目录。通过loadEnv加载环境变量

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({mode})=>{
  const envConfig = loadEnv(mode,'./env')
  const result = {
    plugins: [vue() ],
    envDir: './env',
    envPrefix: ['VITE_','DZ_'],
    build:{
      manifest: true,
      outDir: `./dist/${mode}`
    }
  };
  return result;
})

TypeScript 智能提示

在src目录下的env.d.ts文件，添加如下内容

interface ImportMetaEnv {
  readonly VITE_KEY: string;
  readonly DZ_API: string;
  // 更多环境变量...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}