百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

好用的.env

liuian 2024-12-31 12:57 20 浏览

前端中的 .env 文件：管理环境变量的利器

什么是 .env 文件？

.env 文件是一个文本文件，用于存储环境变量。这些环境变量可以包括 API 密钥、数据库 URL、站点 URL 等敏感信息。在前端开发中，.env 文件通常被用来隔离不同环境（开发、测试、生产）下的配置，从而提高项目的可维护性和安全性。

为什么使用 .env 文件？

  • 安全性： 将敏感信息存储在 .env 文件中，避免直接暴露在代码库中，提高了项目的安全性。
  • 可维护性： 通过 .env 文件管理环境变量，可以方便地切换不同环境的配置，减少了代码修改的次数。
  • 可读性： .env 文件采用键值对的形式，结构清晰，易于阅读和维护。

.env 文件的常用场景

  • API 密钥： 存储第三方 API 的密钥，如 Google Maps API、Stripe API 等。
  • 数据库连接字符串： 存储数据库的连接信息，如主机名、端口、数据库名、用户名和密码。
  • 站点 URL： 存储不同环境下的站点 URL。
  • 其他配置： 存储其他一些需要根据环境变化的配置项。

.env 文件的使用方法

  1. 创建 .env 文件： 在项目根目录下创建一个名为 .env 的文件。
  2. 定义变量： 在 .env 文件中按照 KEY=value 的格式定义变量。例如：
  3. VUE_APP_API_BASE_URL=https://api.example.com NODE_ENV=development
  4. 加载 .env 文件： 使用相应的工具或库来加载 .env 文件中的变量。
  5. Vue CLI： Vue CLI 内置了对 .env 文件的支持，可以自动加载 .env 文件中的变量到 process.env 中。
  6. Create React App： Create React App 也支持 .env 文件。
  7. 其他框架/库： 其他框架或库通常也提供了类似的功能，可以查阅相关文档。
  8. 使用环境变量： 在代码中使用 process.env.KEY 的方式来访问 .env 文件中定义的变量。
  9. JavaScript
  10. // Vue 或 React console.log(process.env.VUE_APP_API_BASE_URL);

.env 文件的注意事项

  • .gitignore： 为了保护敏感信息，建议将 .env 文件添加到 .gitignore 文件中，防止将其提交到代码仓库。
  • 命名规范： 为了方便管理，建议使用统一的命名规范，例如以 VUE_APP_ 或 REACT_APP_ 开头。
  • 不同环境： 可以创建多个 .env 文件（如 .env.development、.env.production）来区分不同环境的配置。
  • 安全性： 对于非常敏感的密钥，可以考虑使用更安全的密钥管理解决方案。

.env 文件的示例

# .env.development
VUE_APP_API_BASE_URL=https://api.example.com/dev
NODE_ENV=development

# .env.production
VUE_APP_API_BASE_URL=https://api.example.com/prod
NODE_ENV=production

总结

.env 文件是前端项目中管理环境变量的最佳实践之一。它可以有效地提高项目的安全性、可维护性和可读性。通过合理地使用 .env 文件，可以更好地管理不同环境下的配置，从而加速开发和部署过程。

相关推荐

2023年最新微信小程序抓包教程（微信小程序 抓包）

声明：本公众号大部分文章来自作者日常学习笔记，部分文章经作者授权及其他公众号白名单转载。未经授权严禁转载。如需转载，请联系开百。请不要利用文章中的相关技术从事非法测试。由此产生的任何不良后果与文...

测试人员必看的软件测试面试文档（软件测试面试怎么说）

前言又到了毕业季，我们将会迎来许多需要面试的小伙伴，在这里呢笔者给从事软件测试的小伙伴准备了一份顶级的面试文档。1、什么是bug?bug由哪些字段(要素)组成?1)将在电脑系统或程序中，隐藏着的...

复活，视频号一键下载，有手就会，长期更新(2023-12-21)

视频号下载的话题，也算是流量密码了。但也是比较麻烦的问题，频频失效不说，使用方法也难以入手。今天，奶酪就来讲讲视频号下载的新方案，更关键的是，它们有手就会有用，最后一个方法万能。实测2023-12-...

新款HTTP代理抓包工具Proxyman(界面美观、功能强大)

不论是普通的前后端开发人员，还是做爬虫、逆向的爬虫工程师和安全逆向工程，必不可少会使用的一种工具就是HTTP抓包工具。说到抓包工具，脱口而出的肯定是浏览器F12开发者调试界面、Charles(青花瓷)...

使用Charles工具对手机进行HTTPS抓包

本次用到的工具：Charles、雷电模拟器。比较常用的抓包工具有fiddler和Charles，今天讲Charles如何对手机端的HTTS包进行抓包。fiddler抓包工具不做讲解，网上有很多fidd...

苹果手机下载 TikTok 旧版本安装包教程

目前苹果手机能在国内免拔卡使用的TikTok版本只有21.1.0版本，而AppStore是高于21.1.0版本，本次教程就是解决如何下载TikTok旧版本安装包。前期准备准备美区...

【0基础学爬虫】爬虫基础之抓包工具的使用

大数据时代，各行各业对数据采集的需求日益增多，网络爬虫的运用也更为广泛，越来越多的人开始学习网络爬虫这项技术，K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章，为实现从易到难全方位覆盖，特设【0基础学爬...

防止应用调试分析IP被扫描加固实战教程

防止应用调试分析IP被扫描加固实战教程一、概述在当今数字化时代，应用程序的安全性已成为开发者关注的焦点。特别是在应用调试过程中，保护应用的网络安全显得尤为重要。为了防止应用调试过程中IP被扫描和潜在的...

一文了解 Telerik Test Studio 测试神器

1.简介TelerikTestStudio（以下称TestStudio）是一个易于使用的自动化测试工具，可用于Web、WPF应用的界面功能测试，也可以用于API测试，以及负载和性能测试。Te...

HLS实战之Wireshark抓包分析（wireshark抓包总结）

0.引言Wireshark（前称Ethereal）是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包，并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口，直接...

信息安全之HTTPS协议详解(加密方式、证书原理、中间人攻击 )

HTTPS协议详解（加密方式、证书原理、中间人攻击）HTTPS协议的加密方式有哪些？HTTPS证书的原理是什么？如何防止中间人攻击？一：HTTPS基本介绍：1.HTTPS是什么：HTTPS也是一个...

Fiddler 怎么抓取手机APP:抖音、小程序、小红书数据接口

使用Fiddler抓取移动应用程序（APP）的数据接口需要进行以下步骤：首先，确保手机与计算机连接在同一网络下。在计算机上安装Fiddler工具，并打开它。将手机的代理设置为Fiddler代理。具体方...

python爬虫教程:教你通过 Fiddler 进行手机抓包

今天要说说怎么在我们的手机抓包有时候我们想对请求的数据或者响应的数据进行篡改怎么做呢？我们经常在用的手机手机里面的数据怎么对它抓包呢？那么...接下来就是学习python的正确姿势我们要用到一款强...

Fiddler入门教程全家桶，建议收藏

学习Fiddler工具之前，我们先了解一下Fiddler工具的特点，Fiddler能做什么？如何使用Fidder捕获数据包、修改请求、模拟客户端向服务端发送请求、实施越权的安全性测试等相关知识。本章节...

fiddler如何抓取https请求实现手机抓包(100%成功解决)

一、HTTP协议和HTTPS协议。(1)HTTPS协议=HTTP协议+SSL协议，默认端口：443(2)HTTP协议（HyperTextTransferProtocol）：超文本传输协议。默认...

一周热门
最近发表
标签列表