vite6环境变量--vue3的H5项目从0到1工程化落地经验篇7

这是vue3的H5项目从0到1工程化落地经验的第7篇，有了这个系列你可以从0创建一个自己的h5项目，并且里边涉及到的常用的点都会包含到。本来想写成一篇，但是太长了，搞得编辑器都卡了。所以我拆分成了一系列的文章，在文章尾部能看到其他链接，如有不当之处，欢迎大神不吝赐教。

环境变量之所以能起作用是因为有工具，vue2有vue cli， vue3有vite，所以当配置环境变量的时候得看他们的文档，环境变量和模式 | Vite 官方中文文档，其实vite官方说的挺全面的，只是没有在实际项目中应用的示例，我这里主要补充的就是实例。

环境变量是啥？

环境变量是定义在根目录下的一系列.env文件内的变量。让我们可以在不同环境中配置一次，以后都不用配置相关资源路径。比如api接口地址，开发、测试、预发布、生产用的都是不同的地址。

各种各样的.env文件名

一般在项目中能看到的.env文件有这些：

开发环境-也就是npm run dev时使用的变量
.env.development
开发环境本地-同时存在时本地的会覆盖上边的，且会被gitignore忽略
.env.development.local
测试环境-也就是npm run test(对应命令vite build --mode test)时使用的变量
.env.test
测试环境本地-同时存在时本地的会覆盖上边的，且会被gitignore忽略
.env.test.local
预发布环境-也就是npm run stage(对应命令vite build --mode staging)时使用的变量
.env.staging
.env.staging.local
生产环境-也就是npm run build时使用的变量
.env.production
生产环境本地-同时存在时本地的会覆盖上边的，且会被gitignore忽略
.env.production.local

如果不指定任何环境，那么总是会被加载，但是如果有对应环境的.env,则会被其他覆盖，.env内的变量不会起作用
.env

最常用有四个环境，开发环境，测试环境，预发布环境（灰度环境）、生产环境。每个环境可以有两个.env文件，一个是.env.mode一个是.env.mode.local。所以算下来有8个这种文件。

当然这些并不是必须有，根据你项目的实际情况用相应的环境就好。

env文件命名

.env文件命名不一定非要development、production、test、staging。是可以自定义的，前提是得在package.json里面做对应的名称修改！(注意命名要语义化方便理解)

scripts": {
    "dev": "vite",
    "test": "vite build --mode test",
    "stage": "vite build --mode staging",
    "build": "vite build",
  },

比如我的stage这一行，执行的时候输入npm run stage,它实际执行的是vite build --mode staging，它使用的环境变量的文件就是.env.staging或者其.env.staging.local文件。注意到这个名字的一致与不一致了吗？实际中最好是一致的，省的给自己找麻烦。也有人这么用，如下：

scripts": {
    "dev": "vite dev --mode development",
    "test": "vite build --mode test",
    "build:staging": "vite build --mode staging",
    "build": "vite build",
  },

只要理解了，一切都是咱们的工具。

local默认被忽略

能被.gitignore忽略自然是因为.gitignore里边有相应的设置。比如下图，所以才能忽略所有的.local文件。

各种.env文件里边怎么写？

理论上来说定义各种变量名都可以，大小写都可以，但是我们实际上是有约束的。
约束自然也是为了我们好，为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

一个典型的.env文件：

# 通用配置（.env）
VITE_PROJECT_NAME = MyVue3App     # Vite

# 开发环境配置（.env.development）
VITE_API_BASE_URL = http://localhost:3000/api     # Vite
VITE_ENV = development													  # 当前环境
VITE_GOOGLE_MAPS_API_KEY = '' # 第三方服务密钥
VITE_FEATURE_NEW_UI = true	  # A/B测试或功能灰度发布

# 生产环境配置（.env.production）
VITE_API_BASE_URL = https://api.example.com
VITE_ENV = production			# 当前环境
VITE_GOOGLE_MAPS_API_KEY = ''   # 第三方服务密钥
VITE_FEATURE_NEW_UI = true		# A/B测试或功能灰度发布				

变量名有要求:

第一类：客户端内用（就是你的各种组件中用）

以 VITE_ 为前缀（这是因为是vue3,构建工具是vite,如果是vue2、vue cli中，那么就得以VUE_APP_为前缀）。

const apiUrl = import.meta.env.VITE_API_BASE_URL;

当然这也是ES模块的能力，vue3用的就是ES模块的底层能力。

第二类：服务端/构建脚本专用变量

以其他前缀命名，仅在 vite.config.js 中通过 process.env 访问：

# .env 定义变量
SERVER_SECRET = my-secret-key

使用时：in vite.config.js,别的地方都不能用。

// vite.config.js
export default defineConfig({
  define: {
    __SERVER_SECRET__: JSON.stringify(process.env.SERVER_SECRET)
  }
});

环境变量生效时间

改动会在重启服务器后生效，所以别忘记重启了哟~

各位看官大老爷夫人小姐少爷们，觉得满意就给个点赞❤。不满意就请在评论里发表意见。交流才能带来进步，感谢各位不吝赐教。

vue3的H5项目从0到1工程化落地经验系列：

1. vite初始化vue3全家桶项目-vue3的H5项目从0到1工程化落地经验篇1
2. 起别名@-vue3的H5项目从0到1工程化落地经验篇2
3. 清除浏览器默认样式-vue3的H5项目从0到1工程化落地经验篇3
4. 同wifi时用手机访问运行的项目-vue3的H5项目从0到1工程化落地经验篇4
5. 得禁用vetur插件-vue3的H5项目从0到1工程化落地经验篇5
6. 修改网站标题与logo-vue3的H5项目从0到1工程化落地经验篇6