一.简介

1.为什么需要环境变量和模式的配置?

环境变量和模式配置在软件开发中至关重要,在开发流程优化,环境差异管理,安全与隐私保护,功能管理与调试,代码复用与维护有着和很大的作用.

2.Vite 在特殊的 import.meta.env 对象下暴露了一些常量。

这些常量在开发阶段被定义为全局变量，并在构建阶段被静态替换

一些内置常量在所有情况下都可用：

1. import.meta.env.MODE: {string} 应用运行的模式。

   <script lang="ts" setup>
   const app: string = import.meta.env.MODE
   
   console.log('模式:', app)
   // 模式: development 与 production 两种
   </script>

   

2. import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。

   <script lang="ts" setup>
   const app: string = import.meta.env.BASE_URL
   
   console.log('BASE_URL', app)
   </script>

   

3. import.meta.env.PROD: {boolean} 应用是否运行在生产环境（使用 NODE_ENV='production' 运行开发服务器或构建应用时使用 NODE_ENV='production' ）。

   <script lang="ts" setup>
   const app: boolean = import.meta.env.PROD
   
   console.log('是否生产环境:', app)
   // 输出: true 与 false 两种
   </script>

   

4. import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

5. import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

二..env 文件

在项目的根目录下创建相关配置文件

Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量：

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

在项目的根目录下进行创建:如下图所示(根据自己需要创建)

带有local的文件属于自己的本地的

 关于这些文件的优先级以及运行时期vite官方给出的解释:

如何配置使用这些文件呢?

这几个配置文件配置都是一样的,只是被执行时期不同;

如何使用?比如配置一些后端的基地址等(可以自定义关键字名称)

# 页面标题
VITE_APP_TITLE = 个人网站后台管理系统

# 开发环境配置  这里可以根据实际情况修改不同的环境变量名称(自定义)
VITE_APP_ENV = 'development'

# 代码地址前缀/开发环境   
VITE_APP_BASE_API = '/dev-api'   

# 开发环境配置的真实的后端接口地址/开发环境
VITE_APP_BASE_API_PROXY = 'https://8023time'

<script lang="ts" setup>
import { onMounted } from 'vue'
const title: string = import.meta.env.VITE_APP_TITLE
onMounted(() => {
  document.title = title // 设置页面标题
})
</script>

import axios from 'axios'

const http = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API_PROXY, // axios请求的基础路径
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
  },
  timeout: 10000,
})

export default http

三.TypeScript 的智能提示(vite官方文档内容)

默认情况下，Vite 在 vite/client.d.ts 中为 import.meta.env 提供了类型定义。随着在 .env[mode] 文件中自定义了越来越多的环境变量，你可能想要在代码中获取这些以 VITE_ 为前缀的用户自定义环境变量的 TypeScript 智能提示。

要想做到这一点，你可以在 src 目录下创建一个 vite-env.d.ts 文件，接着按下面这样增加 ImportMetaEnv 的定义：

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

interface ViteTypeOptions {
  // 添加这行代码，你就可以将 ImportMetaEnv 的类型设为严格模式，
  // 这样就不允许有未知的键值了。
  // strictImportMetaEnv: unknown
}

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 更多环境变量...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

// 其余内容可以看vite官方文档内容

环境变量和模式 | Vite 官方中文文档