在开发 Web 应用的过程中，我们需要在不同的环境中运行和测试我们的应用程序（如开发环境、测试环境和生产环境）。每个环境都有其特定的 API 接口和配置。Vite，一个基于 ESBuild 的前端构建工具，可以帮助我们实现这个需求。

vite 配置官方文档：环境变量

其实 vite 打包的时候，主要是根据不同的环境来生成不同的打包文件的，所以不同的环境是怎么区分呢？这个在 vite 官方已经说明白了，那就是：模式

默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式，也就是在 package.json 里面的命令：

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

# .env.production
VITE_APP_TITLE=My App

在你的应用中，你可以使用 import.meta.env.VITE_APP_TITLE 渲染标题。

在某些情况下，若想在 vite build 时运行不同的模式来渲染不同的标题，你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。例如，如果你想在 staging （预发布）模式下构建应用：

vite build --mode staging

还需要新建一个 .env.staging 文件：

# .env.staging
VITE_APP_TITLE=My App (staging)

由于 vite build 默认运行生产模式构建，你也可以通过使用不同的模式和对应的 .env 文件配置来改变它，用以运行开发模式的构建：

# .env.testing
NODE_ENV=development

配置模式

所以我们可以在项目根目录添加一个.env.testing文件，然后配置一条 test 命令，用于将打包模式改为 testing 模式，这样就可以在执行 test 命令的时候，使用.env.testing文件中的环境变量：

这样，你的 Vite 项目就可以通过生产不同环境的代码进行打包，适合不同环境的 API 接口。

以上关于vite项目怎么build打包成不同环境的代码？从而适配不同环境api接口的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。