Vite 环境（开发、测试、生产）配置文件

[TOC]

## Vite 开发、测试、生产环境配置文件

### 创建三个配置文件

配置文件放置的位置如下图

```
项目根目录/
├─ .env.development   # 开发环境（npm run dev）
├─ .env.test          # 测试环境（npm run build:test）
├─ .env.production    # 生产环境（npm run build:prod）
```

**开发环境配置文件 .env.development**

``` bash
# 运行环境
# NODE_ENV = development

# 环境标识
VITE_APP_ENV = development

# 接口基础地址
VITE_API_BASE_URL = http://localhost:8080

# 项目名称
VITE_APP_TITLE = 开发环境项目

# 是否开启日志与调试信息
VITE_APP_SHOW_LOG = true
VITE_APP_ENABLE_MOCK = true

# WebSocket 地址（可选）
# VITE_APP_WS_URL = ws://localhost:8080/ws
```

**测试环境配置文件 .env.test**

``` bash
# 运行环境
# NODE_ENV = production

# 环境标识
VITE_APP_ENV = test

# 测试环境接口地址
VITE_API_BASE_URL = shturl.cc/I0T4OA0eEodV83mBfeqqNa

# 项目名称
VITE_APP_TITLE = 测试环境项目

# 测试环境可开启少量日志
VITE_APP_SHOW_LOG = true
VITE_APP_ENABLE_MOCK = false

# WebSocket
# VITE_APP_WS_URL = wss://shturl.cc/b64cUoKEfFliFOQt7
```

**生产环境配置文件 .env.production**

``` bash
# 运行环境
# NODE_ENV = production

# 环境标识
VITE_APP_ENV = production

# 生产环境接口地址
VITE_API_BASE_URL = shturl.cc/IcpsZgXCzJ2DoQWTM

# 项目名称
VITE_APP_TITLE = 正式项目

# 生产关闭日志、关闭mock
VITE_APP_SHOW_LOG = false
VITE_APP_ENABLE_MOCK = false

# WebSocket
# VITE_APP_WS_URL = wss://shturl.cc/osNdAB9Awpd2
```

这三个文件**不需要手动引入**，Vite 会**自动识别**，再你使用vite构建命令时，--mode 参数后面的环境参数会自动将环境配置文件进行识别

> Tips：在环境配置文件中不建议配置 NODE_ENV 这个环境变量，交给vite自己管理即可，自己设置可能会出现意想不到错误，正常在打包时也会给出`NODE_ENV=production is not supported in the .env file. Only NODE_ENV=development is supported to create a development build of your project. If you need to set process.env.NODE_ENV, you can set it in the Vite config instead`这样的提示

### 将环境配置文件加入到package.json文件中

```json
{
  "name": "base",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "build:test": "vite build --mode test",
    "build:prod": "vite build --mode production",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.24",
    "vue-router": "^4.6.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
    "vite": "^7.2.4"
  }
}
```

> Tips：配置 package.json 文件是为了可以通过npm命令进行访问，下面内容将介绍如何使用npm运行项目

## 什么时候加载哪个文件

**运行开发服务时**

```bash
npm run dev
```

**自动加载：**
- `.env.development`文件

**打包测试环境**

```bash
npm run build:test
```

**自动加载：**
- `.env.test`

**打包生产环境**

```bash
npm run build:prod
```

**自动加载：**
- `.env.production`

## 环境变量规则

**只有以 `VITE_` 开头的变量，才能在代码里访问！**
普通变量如 `NODE_ENV` 只能在配置文件里用。

例如你文件里写的：

```BASH
VITE_API_BASE_URL = http://localhost:8080
VITE_APP_ENV = development
```

## 代码里怎么使用环境变量

**任意 .vue 文件里使用**

```HTML
<script setup>
console.log(import.meta.env.VITE_API_BASE_URL)
console.log(import.meta.env.VITE_APP_ENV)
</script>
```

**在 js/ts 文件里使用（如 axios、工具类）**

```js
const baseURL = import.meta.env.VITE_API_BASE_URL
const env = import.meta.env.VITE_APP_ENV
```

**在 index.html 里也能用**

```html
<title>%VITE_APP_TITLE%</title>

```

> TIPS：<%= import.meta.env.VITE_APP_TITLE %> 这种写法是 EJS 的语法，vite打包时并不支持EJS语法，因此在使用vite作为脚手架的时候，直接使用vite支持的环境替换语法即可，例如：`%VITE_APP_TITLE%`，这里vite会自动替换环境变量的值

## 封装一个可以环境的工具脚本

**环境的工具脚本 env.js**

```js
/**
 * 获取当前环境配置
 */
export function getEnv() {
  return import.meta.env
}

/**
 * 当前是否开发环境
 */
export function isDev() {
  return import.meta.env.MODE === 'development'
}

/**
 * 当前是否测试环境
 */
export function isTest() {
  return import.meta.env.VITE_APP_ENV === 'test'
}

/**
 * 当前是否生产环境
 */
export function isProd() {
  return import.meta.env.VITE_APP_ENV === 'production'
}

/**
 * 是否允许打印日志
 */
export function enableLog() {
  return import.meta.env.VITE_APP_SHOW_LOG === 'true'
}

/**
 * 控制台输出（根据环境自动控制开关）
 * @param  {...any} args
 */
export function log(...args) {
  if (enableLog()) {
    console.log(...args)
  }
}

/**
 * 获取接口基础地址
 */
export function getBaseUrl() {
  return import.meta.env.VITE_API_BASE_URL || ''
}

/**
 * 获取项目名称
 */
export function getAppTitle() {
  return import.meta.env.VITE_APP_TITLE || '项目'
}
```

**使用工具脚本 env.js**

```js
import { getBaseUrl, isDev, isTest, isProd } from '@/utils/env'

console.log(getBaseUrl()) // 自动读取当前环境的接口地址
console.log(isDev())      // 是否开发环境
console.log(isTest())     // 是否测试环境
console.log(isProd())     // 是否生产环境
```

**配套 request/axios 封装常用写法**

```js
import axios from 'axios'
import { getBaseUrl, log } from '@/utils/env'

const request = axios.create({
  baseURL: getBaseUrl(),
  timeout: 10000
})

// 请求拦截器
request.interceptors.request.use(config => {
  log('请求：', config.url, config)
  // 加 token 等
  return config
})

// 响应拦截器
request.interceptors.response.use(res => {
  log('响应：', res.config.url, res.data)
  return res.data
})

export default request
```

## 测试（非常直观）

在 `App.vue` 里写：

```HTML
<template>
  <div>
    当前环境：{{ import.meta.env.VITE_APP_ENV }}
    <br>
    接口地址：{{ import.meta.env.VITE_API_BASE_URL }}
  </div>
</template>
```

运行 `npm run dev` → 显示开发环境地址
运行 `npm run build:test` → 显示测试环境地址

## 总结
- **.env.xxx 文件 Vite 自动加载**
- **`VITE_` 开头变量才能用**
- **代码里用 `import.meta.env.VITE_XXX`**
- **执行不同命令自动切换环境**