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
}