[Tools] Vite环境变量

https://cn.vitejs.dev/guide/env-and-mode#env-variables-and-modes

 

添加额外的环境变量

.env

#标题
VITE_APP_TITLE='Vite App'
#端口
VITE_PORT=5173
#是否自动打开浏览器
VITE_OPEN=true

.env.development

#开发环境端口
VITE_PORT=8848
#是否删除console打印日志
VITE_DROP_CONSOLE=false

.env.production

#是否删除console打印日志
VITE_DROP_CONSOLE=true

 

在Node环境中读取ENV

Vite提供loadEnv，可以读取指定的或者所有的环境变量;

默认时VITE_前缀，你也可以修改， 通过envPrefix: https://cn.vitejs.dev/config/shared-options.html#envprefix

vite.config.ts

import { defineConfig, ConfigEnv, UserConfig, loadEnv } from 'vite'
import { wrapperEnv } from './build/getEnv.ts'

export default defineConfig(({command, mode}: ConfigEnv):UserConfig => { 
  const root = process.cwd();

  // 默认读取node环境变量
  // console.log(process.env)
  // mode 表示当前情景 root表示项目根路径，'' 表示前缀，''默认读取所有的环境变量
  const env = loadEnv(mode, root, 'VITE_')
  console.log(env);
  const viteEnv = wrapperEnv(env);

  return {
    root,
    server: {
      port:viteEnv.VITE_PORT,
      open:viteEnv.VITE_OPEN
    },
    esbuild: {
      pure:viteEnv.VITE_DROP_CONSOLE ? ['console.log','debugger'] : []
    }
  }
})

build/getEnv.ts

type Recordable<T = any> = Record<string, T>;

export function wrapperEnv(envConfig: Recordable):ViteEnv { 
  const ret: any = {};
  for (const envName of Object.keys(envConfig)) { 
    let realName = envConfig[envName].replace(/\\n/g, '\n');
    realName = realName === 'true' ? true : realName === 'false' ? false : realName;
    if (envName === 'VITE_PORT') { 
      realName = Number(realName);
    }
    ret[envName] = realName;
  }
  return ret;
}

 

src/vite-env.d.ts

https://cn.vitejs.dev/guide/env-and-mode.html#intellisense

declare interface ViteEnv { 
  VITE_APP_TITLE: string
  VITE_PORT: number
  VITE_OPEN: boolean
  VITE_DROP_CONSOLE: boolean
}

//定义映射类型，将属性设置为只读
type ReadonlyProps<T> = {
  readonly [P in keyof T]: T[P]
}

interface ImportMetaEnv extends ReadonlyProps<ViteEnv>{
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

 

在浏览器环境中使用ENV

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