当前位置：首页 > news >正文

vite---环境变量和模式配置(.env 文件)

news 2025/7/14 7:16:14

一.简介

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

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

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

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

一些内置常量在所有情况下都可用：
import.meta.env.MODE: {string} 应用运行的模式。
<script lang="ts" setup>
const app: string = import.meta.env.MODEconsole.log('模式:', app)
// 模式: development 与 production 两种
</script>
import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
<script lang="ts" setup>
const app: string = import.meta.env.BASE_URLconsole.log('BASE_URL', app)
</script>
import.meta.env.PROD: {boolean} 应用是否运行在生产环境（使用 NODE_ENV='production' 运行开发服务器或构建应用时使用 NODE_ENV='production' ）。
<script lang="ts" setup>
const app: boolean = import.meta.env.PRODconsole.log('是否生产环境:', app)
// 输出: true 与 false 两种
</script>
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

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 官方中文文档

查看全文

http://www.dtcms.com/a/277413.html