在开发 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 接口。