#### 区别
**Vite:**
1. **开发服务器启动速度：** Vite 通过利用 ES 模块的特性，实现了快速的冷启动和热模块替换。这意味着在开发环境中，启动开发服务器和应用程序的重新加载速度更快。
1. **即时的按需编译：** Vite 在开发过程中只会编译和打包当前正在编辑的文件，而不会重新构建整个项目。这可以显著减少编译时间，特别是在大型项目中。
1. **ES 模块导入：** Vite 使用 ES 模块导入作为原生的导入/导出系统，可以在浏览器中运行模块。这提供了更好的开发体验和性能。
1. **插件系统：** Vite 使用插件系统来扩展功能，你可以通过插件轻松地集成第三方库、工具和自定义功能。
**Vue CLI:**
1. **全功能的脚手架：** Vue CLI 是一个功能完整的脚手架工具，提供了构建单页应用和多页应用所需的一切工程化配置。
1. **Webpack 打包：** Vue CLI 使用 Webpack 来打包应用，这是一种传统的打包方式，将所有代码打包到一个或多个文件中，并将它们加载到浏览器中。
1. **插件和预设：** Vue CLI 提供了大量的插件和预设，可以用于添加功能、扩展配置、处理样式等。
1. **多页应用支持：** Vue CLI 提供了对多页应用的内置支持，可以轻松地创建多个页面并管理它们的依赖关系。
1. **官方推荐：** 对于大型项目和复杂的需求，Vue 官方更倾向于推荐使用 Vue CLI。
**细节对比：**
- **环境配置：** Vite 通过环境变量文件 `.env` 进行配置，而 Vue CLI 使用 `vue.config.js` 进行配置。
- **编译优化：** Vite 在开发环境下进行按需编译，而 Vue CLI 可以通过 Webpack 进行更多的优化，如代码分割、压缩、混淆等。
- **插件生态：** Vue CLI 拥有更丰富的插件生态，可以满足不同项目的需求。
- **开发模式：** Vite 的开发模式更倾向于原生 ES 模块导入，而 Vue CLI 更传统地使用 CommonJS 导入。
#### 环境变量配置
关于vite构建的项目，环境变量的配置方式与传统的 Vue CLI 项目有一些不同。Vite 使用不同的方式来管理环境变量。
在 Vite 项目中，直接在根目录下创建以 `.env` 为前缀的文件来定义环境变量，例如 `.env.development` 和 `.env.production`。然后，在代码中通过 `import.meta.env` 来访问这些环境变量。
对于使用 Vite 构建的项目，环境变量的配置方式与传统的 Vue CLI 项目有一些不同。Vite 使用不同的方式来管理环境变量。
在 Vite 项目中，可以直接在根目录下创建以 `.env` 为前缀的文件来定义环境变量，例如 `.env.development` 和 `.env.production`。然后，在代码中通过 `import.meta.env` 来访问这些环境变量。
以下是在 Vite 项目中配置和使用环境变量的示例：
1. 在项目根目录下创建 `.env.development` 和 `.env.production` 文件，分别用于开发环境和生产环境的配置。
2. 在这些文件中，定义环境变量，例如：
```
VITE_APP_BASE_API='接口地址'
```
3. 在代码中，可以通过 `import.meta.env` 来访问这些环境变量。例如：
```
// 获取基础API URL
const baseUrl = import.meta.env.VITE_APP_BASE_API;
```
在 Vite 中，你不需要手动引入 `process.env`，而是直接使用 `import.meta.env` 来访问环境变量。Vite 会根据当前环境加载对应的环境变量配置。
即在[封装的请求工具](https://juejin.cn/post/7256964915134365752)中，无需像cli中标注`baseURL: process.env.VUE_APP_BASE_API`，直接`import.meta.env.` 如下
```javascript
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API, // url = base url + request url
timeout: 60000, // request timeout
});
```
#### 接口地址
接口地址可以是IP地址，也可以是域名。
- **IP地址：** 如果后端服务部署在特定的服务器上，可以使用服务器的IP地址作为接口地址。例如，`http://192.168.1.100/api`。
- **域名：** 更常见的情况是使用域名作为接口地址，因为域名更易于记忆，并且可以随时切换到不同的服务器。例如，`https://api.example.com`。
使用域名作为接口地址的好处是，可以在需要时更改服务器的实际位置，而不需要更改前端代码，只需要更改DNS记录。这有助于在后端服务器发生变化时保持前端代码的稳定性。
无论选择使用IP地址还是域名作为接口地址，都取决于项目需求和后端服务器的部署方式。确保在环境变量中正确配置这些地址，以便在不同环境中使用不同的配置。
更多关于项目构建以及环境变量点击[这里](https://juejin.cn/post/7249186287578726458)。