【从零到一手撕脚手架 | 第二节】配置基础项目env环境development,production,test

1. 创建环境文件（项目根目录下）：

.env.development    # 开发环境
.env.production     # 生产环境
.env.test           # 测试环境

2. 环境文件示例：

# .env.development
VITE_API_BASE_URL=/api
VITE_ENV=development

# .env.production
VITE_API_BASE_URL=https://prod.example.com
VITE_ENV=production

# .env.test
VITE_API_BASE_URL=https://test.example.com
VITE_ENV=test

3. package示例：

"scripts": {
  "dev": "vite",
  "build:prod": "vite build --mode production",
  "build:test": "vite build --mode test",
  "preview": "vite preview"
},

4. index.vue示例：

<script setup>
console.log(import.meta.env.VITE_API_BASE_URL)

5. 运行及测试：

npm run dev

这里运行dev，在index文件下打印env中VITE_API_BASE_URL变量

接下来运行下面两条命令，查看生产环境中的变量

vite build --mode production
vite preview

接下来运行下面两条命令，查看测试环境中的变量

vite build --mode test 
vite preview