vite project configuration environment variables

1. Create .env.dev and .env.prod files under the src folder.

.env.dev -- development environment configuration file
.env.prod -- production environment configuration file

# .env.dev
# 页面标题
VITE_APP_TITLE = xxx

# 生产环境配置
VITE_ENV = 'development'

# 筋膜鸟管理系统/生产环境
VITE_APP_BASE_API = '/dev-api'

# .env.prod
# 页面标题
VITE_APP_TITLE = xxx

# 生产环境配置
VITE_ENV = 'production'

# 筋膜鸟管理系统/生产环境
VITE_APP_BASE_API = '/prod-api'

2. Configure ts.

Create vite-env.d.ts under the src folder

interface ImportMetaEnv {
    
    
  readonly VITE_APP_TITLE: string,
  readonly VITE_ENV: string,
  readonly VITE_APP_BASE_API: string
}

3. Configure the package.json file.

"scripts": {
    
    
    "dev": "vite --mode development",
    "build": "vite --mode production",
    ...
  },

4. Used in the file.

console.log(import.meta.env.VITE_APP_BASE_API) // dev-api
console.log(import.meta.env.VITE_ENV) // development