首先祝大家端午安康！
今天安排一篇自己在项目中如何打包部署到各环境的操作。随着vue3的默认版本，正好公司要开发新的项目，于是就练练手，话不多说，看下我是如何在项目中使用的吧～
如何自定义环境变量？
vite官网已经明确指出：cn.vitejs.dev/guide/env-a…
创建.env 文件
有时一个项目分各个地址，那就需要用到---在指定模式下加载（项目中的生产环境、验收环境、测试环境等）。那我们就需要创建多个模式下的.env文件咯。
一、开发模式
默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式。
1、首先创建文件
在项目目录下创建（.env.development或者.env.development.local）文件，与src是同级。
#开发模式下的环境变量
VITE_API_BASE_URL = http://******* (实际你接口路径)
(注意：为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码)
2、通过环境变量来读取
在我们封装的axios文件中使用
axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL
在实际开发import.meta.env是点不出我们自定义的变量的需要我们在src文件下的env.d.ts中增加下列代码
interface ImportMetaEnv {
readonly VITE_API_BASE_URL: string
// 更多环境变量...
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
二、生产模式
build 命令则运行在 production (生产) 模式。当执行 vite build 时，它会自动加载 .env.production 中可能存在的环境变量。
1、创建文件
在项目目录下创建（.env.production.env.production.local）文件，与src是同级。
2、通过环境变量来读取和上边开发模式是一样的哦，这里懒懒的我就不写了哈。有什么问题评论区留言。
这里主要讲的是如果增加一些验收、测试环境我们如何编译问题。
项目中可以自定义多个模式，比如.env.test文件。此时部署打包就需要我们在package.json文件中scripts内增加编译命令
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"build:test": "vue-tsc --noEmit && vite build --mode test",
"preview": "vite preview"
},
build:test,就是我增加的测试环境，通过配置vite build --mode test然后使用yarn build:test就会打包测试模块的地址，以此类推～
注意事项：（均来自vite官网的截图哦～）
好啦，今天就写到这里啦，小伙伴们有什么问题评论区里留言哦～
