vite项目配置环境变量

1. src文件夹下创建.env.dev和.env.prod文件。

.env.dev --开发环境配置文件
.env.prod --生产环境配置文件

# .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. 配置ts。

src文件夹下创建vite-env.d.ts

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

3. 配置package.json文件。

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

4. 在文件中使用。

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