基于Vite创建的Vue3项目的环境变量与模式

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量，这些变量在构建时会被静态地替换掉

1. 设置项目环境变量：

   在项目的根目录创建 .env.production（生产环境） .env.development（开发环境）

   设置环境变量，必须以 VITE_ 为前缀的变量才会暴露

   示例：

   .env.development 

   # 开发环境变量 (不同与模式)
   NODE_ENV=development
   # 环境变量名必须以VITE_为前缀才会暴露,通过import.meta.env.VITE_XXX获取
   VITE_SERVER_URL = 'https://pcapi-xiaotuxian-front-devtest.itheima.net'

   .env.production

   NODE_ENV='production'
   VITE_SERVER_URL = 'https://pcapi-xiaotuxian-front.itheima.net

2. 获取项目的环境变量：

   通过 import.meta.env.VITE_XXX获取暴露的环境变量

   示例：

   // import.meta.env.DEV 获取是否处于开发环境返回boolean
   pageSize: import.meta.env.DEV ? 50 : 1,
   // 获取当前环境的服务器URL
   options.url = import.meta.env.VITE_SERVER_URL + options.url

3. 模式判断：

   默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式

   这意味着当执行 vite build 时，它会自动加载 .env.production 中可能存在的环境