Vue3中配置environment

environment顾名思义就是环境，对于项目来说，无非就是：

• 开发环境：development
• 生产环境：production

某些逻辑，配置等在两个不同的环境中要呈现出不同的状态，所以environment是一个必要的事情。

---

Vue3中配置environment：

主要分为两个步骤：

1. 创建文件
2. 配置文件

第一步 - 创建文件：

1. 在项目根目录下创建environemnt文件夹
2. 在environment文件夹下创建.env.development 和 .env.production 文件
3. 将项目创建时就存在的.env.d.ts 类型文件也拖到environment文件夹里

此时的文件结构是这样的：

|--environment
|----.env.development
|----.env.production
|----.env.d.ts

第二步 - 配置文件：

1. 在tsconfig.app.json中添加类型路径，确保类型可以正确读取。

{
   "include": ["environment/env.d.ts", ...],
}

2. 在vite.config.ts中添加envDir配置

export default defineConfig({
  ...
  envDir: 'environment'
})

第二步中配置的路径都是我们自己指定的，由此可知第一步中的文件组合自己可以自由组合，只要在第二步中配置完善即可。

---

Vue3中使用environment：

默认环境配置中的字段名称需要以VITE_开头，所以如果我们有个test字段需要配置，那么应该是这样的：

.env.development

VITE_TEST = false

.env.production

VITE_TEST = true

.env.d.ts

/// <reference types="vite/client" />

interface ImportMetaEnv {
  // 这里配置字段的类型
  readonly VITE_TEST : boolean;
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

在组件中使用时：
Test.vue

<script setup lang="ts">
	console.log(import.meta.env.VITE_TEST )
</script>

其他

如果你感觉VITE_开头不好看，也可以自定义，只需要在vite.config.ts配置envPrefix即可。

export default defineConfig({
  ...
  envPrefix: '自定义的前缀'
})

前缀最好不要设置为空字符串(’ ')，具体的可以参考vite config - envprefix