使用 Vue 3、Vite 和 TypeScript 的环境变量配置

使用 Vue 3、Vite 和 TypeScript 的环境变量配置

在开发现代前端应用时，环境变量是一个非常重要的概念。它可以帮助我们根据不同的环境（开发、测试、生产）配置不同的行为，比如 API 请求地址、调试选项等。在 Vue 3、Vite 和 TypeScript 项目中，如何正确配置和使用环境变量是一个经常遇到的问题。

一、初始化 Vue 3 项目

首先，我们需要使用 Vite 来初始化一个 Vue 3 项目，并启用 TypeScript 支持。

npm init vite@latest my-vue-app --template vue-ts
cd my-vue-app
npm install

执行上面的命令后，你将得到一个包含 Vue 3 和 TypeScript 支持的 Vite 项目。

二、环境变量的基础概念

在 Vite 中，环境变量可以通过 .env 文件进行管理。Vite 内置支持基于不同环境（开发、生产等）的变量管理，这意味着你可以为不同的环境创建不同的变量文件。

  • .env：适用于所有环境
  • .env.development：仅适用于开发环境
  • .env.production：仅适用于生产环境

这些文件中定义的环境变量将会在项目启动时被自动加载。

三、如何定义环境变量

在 .env 文件中定义环境变量非常简单，你只需要按照 KEY=VALUE 的格式来定义即可。

# .env.development
VITE_API_URL=https://dev.api.example.com
VITE_APP_TITLE=MyVueApp (Development)

# .env.production
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=MyVueApp

注意，Vite 要求环境变量的名字必须以 VITE_ 前缀开头。这是为了确保这些变量在构建时能够被正确注入到项目中，并防止与其他工具或系统环境变量冲突。

四、在项目中使用环境变量

一旦定义了环境变量，就可以在项目代码中通过 import.meta.env 访问这些变量。例如，在一个 Vue 组件中：

<script lang="ts">
import { defineComponent } from 'vue';export default defineComponent({setup() {const apiUrl = import.meta.env.VITE_API_URL;const appTitle = import.meta.env.VITE_APP_TITLE;console.log('API URL:', apiUrl);console.log('App Title:', appTitle);return { apiUrl, appTitle };}
});
</script>

import.meta.env 是 Vite 提供的一个全局对象，它包含了所有以 VITE_ 开头的环境变量。

五、区分不同环境

在项目开发中，我们可能需要区分不同的环境来执行不同的逻辑。可以使用 import.meta.env.MODE 来判断当前的构建环境。

<script lang="ts">
import { defineComponent } from 'vue';export default defineComponent({setup() {if (import.meta.env.MODE === 'development') {console.log('Running in development mode');} else if (import.meta.env.MODE === 'production') {console.log('Running in production mode');}return {};}
});
</script>

import.meta.env.MODE 会返回当前的模式，可以是 development 或 production，也可以是自定义的模式。

六、TypeScript 环境变量类型提示

为了让 TypeScript 识别我们定义的环境变量，我们可以创建一个 env.d.ts 文件，手动为 import.meta.env 提供类型声明。

在项目根目录下创建 src/env.d.ts 文件，内容如下：

interface ImportMetaEnv {readonly VITE_API_URL: string;readonly VITE_APP_TITLE: string;
}interface ImportMeta {readonly env: ImportMetaEnv;
}

这样，当我们使用 import.meta.env.VITE_API_URL 时，TypeScript 就会提供类型检查和提示功能，避免拼写错误或类型错误。

七 .env文件的运行模式

在 Vite 项目中，.env 文件的后缀（如 .env.development 和 .env.production）通过 运行模式 (mode) 来生效。Vite 根据不同的运行模式，自动加载相应的环境文件。这一过程可以通过以下几个方面来理解。

1. 运行模式（Mode）

Vite 提供了不同的 运行模式，如 development、production 和自定义模式。运行模式影响了环境变量的加载方式，以及构建时的配置差异。

  • development 模式：用于本地开发，通常启用热模块替换（HMR）等功能。
  • production 模式：用于生产环境，通常会启用代码压缩、Tree-shaking 等优化。

当你启动 Vite 时，Vite 会根据运行模式选择性加载不同的 .env 文件：

  • 如果是 development 模式，Vite 会加载 .env.development 文件。
  • 如果是 production 模式，Vite 会加载 .env.production 文件。
  • .env 文件是通用文件，不论什么模式都会加载。

2. 文件加载顺序

Vite 会按照以下顺序依次加载环境文件，且后面的文件会覆盖前面文件中定义的同名变量：

  1. .env：通用环境变量，适用于所有模式。
  2. .env.local：通用的本地环境变量，不会上传到版本控制。
  3. .env.[mode]：特定模式的环境变量，例如 .env.development 或 .env.production。
  4. .env.[mode].local：特定模式的本地环境变量，不会上传到版本控制。

例如，在 development 模式下，Vite 的加载顺序如下：

  • .env
  • .env.local
  • .env.development
  • .env.development.local

在 production 模式下，加载顺序为：

  • .env
  • .env.local
  • .env.production
  • .env.production.local

3. 如何指定运行模式

默认情况下，Vite 在开发环境中运行 development 模式，在构建时运行 production 模式。不过，你也可以通过命令行参数显式指定模式。

例如，使用 vite 启动开发服务器时，默认运行 development 模式：

npm run dev

但你也可以通过 --mode 参数指定运行模式：

# 使用 production 模式启动开发服务器
npm run dev -- --mode production

同样地，在构建项目时，默认是 production 模式，但你也可以指定其他模式：

# 以 staging 模式构建
npm run build -- --mode staging

通过指定 --mode 参数，Vite 会根据所提供的模式来加载对应的 .env.[mode] 文件。

4. 自定义模式

除了 development 和 production 模式，你还可以根据项目需求创建自定义模式。

假设你要为 staging（预发布）环境配置变量，可以创建一个 .env.staging 文件，然后在构建命令中指定 staging 模式：

# .env.staging 文件中的变量
VITE_API_URL=https://staging.api.example.com
VITE_APP_TITLE=MyVueApp (Staging)

构建命令：

npm run build -- --mode staging

当你运行这个命令时，Vite 会加载 .env.staging 和 .env.staging.local 文件中的环境变量。

5. 环境变量覆盖

同一环境下的多个 .env 文件中如果定义了同名变量，加载顺序较后的文件中的值会覆盖较前的文件中的值。这为我们提供了灵活性，可以通过 .env.local 或 .env.[mode].local 文件来覆盖默认的设置，而不需要修改公共的 .env 文件。这在团队协作中尤为有用，.local 文件可以包含敏感信息或个人的开发配置，并且可以被 .gitignore 忽略，不会被提交到版本控制系统中。

6. 运行模式汇总说明

  • .env 文件后缀根据 Vite 的 运行模式（mode）生效，如 development、production 等。
  • 通过 .env.[mode] 文件可以为特定模式定义环境变量，Vite 会根据当前模式自动加载对应的 .env 文件。
  • 加载顺序为 .env → .env.local → .env.[mode] → .env.[mode].local，后者会覆盖前者的同名变量。
  • 可以通过命令行的 --mode 参数指定自定义模式，以便加载自定义的环境配置文件。

七、总结

在 Vue 3、Vite 和 TypeScript 项目中使用环境变量可以极大地提高应用的灵活性和可维护性。通过创建 .env 文件，并使用 import.meta.env 来访问和管理环境变量，可以轻松地根据不同的环境配置不同的项目行为。记得在项目中使用 TypeScript 类型声明为环境变量提供类型提示，这样可以进一步提升开发体验。

参考链接

  • Vite 官方文档：https://vitejs.dev/guide/env-and-mode.html
  • Vue 3 官方文档：https://vuejs.org/
  • TypeScript 官方文档：https://www.typescriptlang.org/docs/

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/146625.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

一个.NET开发且功能强大的Windows远程控制系统

一个.NET开发且功能强大的Windows远程控制系统

项目介绍 SiMayRemoteMonitorOS是一个基于Windows的远程控制系统&#xff0c;完全采用C#.NET开发&#xff0c;遵循AGPL-3.0开源协议。 核心功能 远程桌面&#xff1a;基于逐行扫描算法&#xff0c;提供流畅的远程桌面体验&#xff0c;支持多屏幕切换&#xff0c;以及全屏监控…
阅读更多...
【C++】类和对象（下）：再探构造函数、类型转换、static成员、友元、内部类、匿名对象、拷贝对象时编译器的优化

【C++】类和对象（下）：再探构造函数、类型转换、static成员、友元、内部类、匿名对象、拷贝对象时编译器的优化

这篇博文是C中类和对象的最后一些知识&#xff0c;包括再探构造函数、类型转换、static成员、友元、内部类、匿名对象、拷贝对象时编译器的优化这些知识点。 1.再探构造函数 之前我们实现构造函数时&#xff0c;初始化成员变量主要是使用函数体内赋值&#xff0c;构造函数初始化…
阅读更多...
neo4j：ubuntu环境下的安装与使用

neo4j：ubuntu环境下的安装与使用

一、neo4j安装 1. 下载安装包 进入网站&#xff1a;https://neo4j.com/deployment-center/#community 在上图中选择下载即可&#xff08;社区版免费&#xff09; 注意&#xff1a;neo4j的版本要和电脑安装的jdk版本对应&#xff0c;jdk版本使用java --version查看&#xff1a;…
阅读更多...
计算机视觉的应用34-基于CV领域的人脸关键点特征智能提取的技术方法

计算机视觉的应用34-基于CV领域的人脸关键点特征智能提取的技术方法

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下计算机视觉的应用34-基于CV领域的人脸关键点特征智能提取的技术方法。本文主要探讨计算机视觉领域中人脸关键点特征智能提取的技术方法。详细介绍了基于卷积神经网络模型进行人脸关键点提取的过程&#xff0c;包括使…
阅读更多...
长列表加载性能优化

长列表加载性能优化

一、长列表优化概述 列表是应用开发中最常见的一类开发场景&#xff0c;它可以将杂乱的信息整理成有规律、易于理解和操作的形式&#xff0c;便于用户查找和获取所需要的信息。应用程序中常见的列表场景有新闻列表、购物车列表、各类排行榜等。随着信息数据的累积&#xff0c;特…
阅读更多...
基于SpringBoot的漫画网设计与实现

基于SpringBoot的漫画网设计与实现

博主介绍&#xff1a;专注于Java vue .net php phython 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟 我的博客空间发布了1000毕设题目 方便大家学习使用 感兴趣的…
阅读更多...
Java 每日一刊（第14期）：抽象类和接口

Java 每日一刊（第14期）：抽象类和接口

“抽象是所有能力的精髓。” 前言 这里是分享 Java 相关内容的专刊&#xff0c;每日一更。 本期将为大家带来以下内容&#xff1a; 抽象类接口抽象类和接口的区别什么时候用抽象类&#xff0c;什么时候用接口抽象类可以实现接口接口中的常量其实是 public static final标记…
阅读更多...
C语言图形编程：构建视觉效果与应用

C语言图形编程：构建视觉效果与应用

引言 在计算机科学的领域中&#xff0c;C语言凭借其简洁、高效以及对底层硬件的强大控制能力&#xff0c;一直是系统级编程的首选语言之一。尽管近年来出现了许多高级语言&#xff0c;但C语言仍然在多个领域占据着重要地位&#xff0c;特别是在图形编程方面。本文将深入探讨如…
阅读更多...
粒子向上持续瀑布动画效果（直接粘贴到记事本改html即可）

粒子向上持续瀑布动画效果（直接粘贴到记事本改html即可）

代码&#xff1a; 根据个人喜好修改即可 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>宽粒子向上…
阅读更多...
MOSFET是什么，终于有了一点点感知

MOSFET是什么，终于有了一点点感知

目录 MOSFET是什么&#xff1f;FETMOS MOSFET和功率MOSFETMOSFET功率MOSFET MOSFET是什么&#xff1f; 英文是metal-oxide-semiconductor-field-effect-transistor&#xff0c;金属氧化物半导体场效应晶体管。 可以分开来看一下&#xff0c;MOS和FET FET 其中&#xff0c;FE…
阅读更多...
图片类型转化---模拟某wps

图片类型转化---模拟某wps

文件上传功能的深入探讨 文件上传是Web应用程序中常见的功能&#xff0c;它允许用户将本地文件通过Web界面发送到服务器。在Flask中&#xff0c;这通常是通过处理表单数据来实现的。表单必须设置enctype为multipart/form-data&#xff0c;这样浏览器才能将文件作为多部分消息发…
阅读更多...
Linux常用命令（部分学习待继续补充）

Linux常用命令（部分学习待继续补充）

pwd print working directory 打印当前的工作目录 / 根目录 ls list 列出当前目录下的所有文件 ls / ls -h(human) ls -l(long) cd change directory 更改目录 cd … 回到上一级目录 ls list ls -l 会列出文件的详细信息 第一个字符是-表示普通文件 d表示是一个目录 rwx read …
阅读更多...
keil 下载安装 保姆级教程

keil 下载安装 保姆级教程

一.前言 最近被安排开发一个单片机的项目&#xff0c;回头想了一下&#xff0c;自己上次弄单片机的时候&#xff0c;还都是在大学期间&#xff0c;到现在也有三四年没有碰过了&#xff0c;大部分的知识点都忘了&#xff0c;所以又重新的把以前的笔记和资料&#xff0c;拿出来温…
阅读更多...
NXP实战笔记（十六）：NXP 32K3xx系列单片机有关OTA升级的思考

NXP实战笔记（十六）：NXP 32K3xx系列单片机有关OTA升级的思考

目录 1、概述 2、参考资料 3、思考点1&#xff1a;需不需要传统BootLoader&#xff1f; 3.1、无需传统BootLoader 3.2、有传统BootLoader 4、OTA升级之后是否立即实施切换 5、兼容编程会话 6、APP内部集成34、36、37服务 7、Flash放置问题 1、概述 NXP的S32K3系列单片机…
阅读更多...
初写MySQL四张表:(4/4)

初写MySQL四张表:(4/4)

进度条很喜人&#xff0c;你是否已经修炼到这一步了呢&#xff1f; 初写MySQL四张表:(1/4)-CSDN博客 初写MySQL四张表:(2/4)_数据库表样例-CSDN博客 初写MySQL四张表:(3/4)-CSDN博客 若现在你已经有了前面的基础&#xff0c;那就正式开始吧。 四张表&#xff1a; 这次在实现…
阅读更多...
不同编程语言的互相调用

不同编程语言的互相调用

C语言与Python 步骤&#xff1a; 编写C代码 (hello_c.c): #include <stdio.h>void printHello(const char *name) {printf("Hello, %s!\n", name); }编译C代码为共享库: gcc -shared -o hello_c.so hello_c.c编写Python代码 (hello_c_py.py): import ctypes# …
阅读更多...
CocosCreator 3.x 实现角色移动与加载时动态屏幕边缘检测

CocosCreator 3.x 实现角色移动与加载时动态屏幕边缘检测

效果 思路 通过cc.view全局单例 View 对象获取屏幕尺寸加载时根据屏幕尺寸动态计算上下左右边缘 代码实现 import { _decorator, Component, EventTouch, Input, input, Node, view } from cc; const { ccclass, property } _decorator;/*** 玩家控制脚本*/ ccclass(Player…
阅读更多...
探索AI编程新时代：GitHub Copilot如何重塑开发者工作效率

探索AI编程新时代：GitHub Copilot如何重塑开发者工作效率

在当今技术瞬息万变的时代&#xff0c;软件开发者们每天都在努力寻找更高效的编程方法。面对繁忙的工作日程和不断增加的项目压力&#xff0c;如何在编码过程中大幅提升效率成为了一个备受关注的话题。在众多工具中&#xff0c;GitHub Copilot以其强大的AI驱动能力脱颖而出&…
阅读更多...
二叉树的层序遍历（含八道leetcode相关题目）

二叉树的层序遍历（含八道leetcode相关题目）

文章目录 二叉树层序遍历模板102. 二叉树的层序遍历107. 二叉树的层序遍历 II199. 二叉树的右视图637. 二叉树的层平均值515. 在每个树行中找最大值429. N 叉树的层序遍历116. 填充每个节点的下一个右侧节点指针117. 填充每个节点的下一个右侧节点指针 II 二叉树层序遍历模板 …
阅读更多...
基于Java springboot+mybatis 网上商城系统

基于Java springboot+mybatis 网上商城系统

基于Java springbootmybatis 网上商城系统 一、系统介绍二、功能展示1.主页(客户)2.登陆&#xff08;客户&#xff09;3.注册&#xff08;客户&#xff09;4.购物车(客户)5.我的订单&#xff08;客户&#xff09;6.用户管理&#xff08;管理员&#xff09;7.分类管理&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023