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

Vue 项目中,.env文件怎么用?

在 Vue 项目中,.env 文件用于存储环境变量,不同的环境(如开发环境、测试环境、生产环境)可以使用不同的 .env 文件来管理对应的配置信息。以下是关于 Vue 项目中 .env 文件的详细使用方法:

1. 项目创建

确保你已经使用 Vue CLI 创建了一个 Vue 项目。如果还没有创建,可以使用以下命令创建一个新的 Vue 项目:

vue create my-vue-project
cd my-vue-project

2. .env 文件的命名规则

Vue CLI 支持多种 .env 文件命名,以适应不同的环境需求:

  • .env:所有环境都会加载的通用配置。
  • .env.development:开发环境(npm run serve)加载的配置。
  • .env.production:生产环境(npm run build)加载的配置。
  • .env.test:测试环境加载的配置。

3. 定义环境变量

在相应的 .env 文件中,按照 VUE_APP_ 前缀的格式定义环境变量,例如:

  • .env.development
VUE_APP_API_BASE_URL = http://localhost:3000/api
VUE_APP_DEBUG = true
  • .env.production
VUE_APP_API_BASE_URL = https://example.com/api
VUE_APP_DEBUG = false

注意:只有以 VUE_APP_ 开头的变量才会被 Vue CLI 注入到项目中。

4. 在项目中使用环境变量

在 Vue 项目中,可以通过 process.env 对象来访问定义的环境变量。

  • 在 Vue 组件中使用
<template><div><p>API Base URL: {{ apiBaseUrl }}</p><p>Debug Mode: {{ debugMode }}</p></div>
</template><script>
export default {data() {return {apiBaseUrl: process.env.VUE_APP_API_BASE_URL,debugMode: process.env.VUE_APP_DEBUG};}
};
</script>
  • 在 JavaScript 文件中使用
// src/services/api.js
const apiBaseUrl = process.env.VUE_APP_API_BASE_URL;export function fetchData() {return fetch(`${apiBaseUrl}/data`).then(response => response.json());
}

5. 加载不同环境的配置

根据启动命令的不同,Vue CLI 会自动加载相应的 .env 文件:

  • 开发环境:运行 npm run serve 时,会加载 .env.env.development 文件,.env.development 文件中的配置会覆盖 .env 中同名的配置。
  • 生产环境:运行 npm run build 时,会加载 .env.env.production 文件,.env.production 文件中的配置会覆盖 .env 中同名的配置。

6. 自定义环境

除了默认的开发和生产环境,你还可以自定义环境。例如,创建一个 .env.staging 文件用于预发布环境:

VUE_APP_API_BASE_URL = https://staging.example.com/api
VUE_APP_DEBUG = false

然后,在 package.json 中添加自定义脚本:

{"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","build:staging": "vue-cli-service build --mode staging"}
}

运行 npm run build:staging 时,会加载 .env.env.staging 文件。

7. 注意事项

  • 安全性:不要在 .env 文件中存储敏感信息(如数据库密码、API 密钥等),如果需要存储敏感信息,可以考虑使用环境变量注入或加密存储。
  • 重启服务:修改 .env 文件后,需要重新启动开发服务器或重新构建项目,新的环境变量才能生效。

相关文章:

Vue 项目中,.env文件怎么用?

在 Vue 项目中&#xff0c;.env 文件用于存储环境变量&#xff0c;不同的环境&#xff08;如开发环境、测试环境、生产环境&#xff09;可以使用不同的 .env 文件来管理对应的配置信息。以下是关于 Vue 项目中 .env 文件的详细使用方法&#xff1a; 1. 项目创建 确保你已经使…...

LeetCode hot 100—爬楼梯

题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方法可以爬到楼顶。 1. 1 阶 1 阶 2. 2 阶 示例…...

【js逆向】

地址&#xff1a;aHR0cHM6Ly93d3cud2VpYm90b3AuY24vMi4wLw f12进入 debugger&#xff0c;过debugger 查看预览数据 全局搜索 请求网址中的 api.weibotop.cn 在下方疑似找到了加密和解密的函数 断点调试 控制台输出 那个n就是 常见的 cryptoJs库 const cryptoJs require(cry…...

论文阅读-秦汉时期北方边疆组织的空间互动模式与直道的定位(中国)

论文英文题目&#xff1a;A spatial interaction model of Qin-Han Dynasty organisation on the northern frontier and the location of the Zhidao highway (China) 发表于&#xff1a;journal of archaeological science&#xff0c;影响因子&#xff1a;3.030 论文主要是…...

DirectX12(D3D12)基础教程四 入门指南

本章主要讲了些D3D12概念和理论&#xff0c;对第一、二章相关概念的补充和纠正&#xff0c;要的理解D3D12概念和理论基础&#xff0c;结合代码加深理解。 命令队列和命令列表 为了实现渲染工作的重用和多线程缩放&#xff0c; 在 D3D12 中&#xff0c;做了三个重要方面不同于 …...

C语言:确定进制

题目&#xff1a; 6942对于十进制来说是错误的&#xff0c;但是对于13进制来说是正确的。即, 6(13) 9(13) 42(13)&#xff0c; 而 42(13)4131213054(10)。 任务是写一段程序&#xff0c;读入三个整数p、q和 r&#xff0c;然后确定一个进制 B(2<B<40) 使得 p q r。 如果…...

如何在 Windows 10 启用卓越性能模式及不同电源计划对比

在使用 powercfg -duplicatescheme 命令启用 “卓越性能模式”&#xff08;即 Ultimate Performance 模式&#xff09;之前&#xff0c;有几个前提条件需要注意&#xff1a; 前提条件&#xff1a; 系统版本要求&#xff1a;卓越性能模式 仅在 Windows 10 专业版 或更高版本&a…...

Unity Android出包

Unity Android出包 1.Android Studio版本 不能高于Unity的版本 2.so库 这个库需要自己拷贝到Android工程当中 3.JDK版本太老 编译可以正常&#xff0c;但无法运行 File->ProjectStructure->SDK Location->Gradle Setting->Gradle JDK->X:/Android Stuido/jre …...

Day04 模拟原生开发app过程 Androidstudio+逍遥模拟器

1、用Androidstudio打开已经写好了的music项目 2、逍遥模拟器打开apk后缀文件 3、在源文件搜索关键字 以后的测试中做资产收集...

2025人工智能AI新突破:PINN内嵌物理神经网络火了

最近在淘金的时候发现基于物理信息的神经网络&#xff08;简称PINN&#xff09;也是个研究热点&#xff0c;遂研读了几篇经典论文&#xff0c;深觉这也是个好发论文的方向&#xff0c;所以火速整理了一些个人认为很值得一读的PINN论文和同学们分享。 为了方面同学们更好地理解…...

通义万相 2.1 携手蓝耘云平台:开启影视广告创意新纪元

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

【计算机网络】深入解析 HTTP 请求中的 header 类型:Cookie 的概念、特点和应用场景:登录和用户认证

网络原理— HTTP 请求“报头”(header) Cookie 是什么 HTTP报头中的Cookie&#xff0c;用大白话来说&#xff0c;就像你去餐厅吃饭时拿到的一张会员卡&#xff1a; 初次访问 (清除该网站的所有 Cookie 后重新访问该网站&#xff0c;效果相同)&#xff1a; 当你第一次访问一个网…...

LeetCode 解题思路 11(Hot 100)

解题思路&#xff1a; 若相等&#xff1a; 直接返回 true。若当前元素大于目标值&#xff1a; 由于列递增&#xff0c;当前列下方所有元素均大于目标值&#xff0c;故排除该列&#xff08;向左移动&#xff09;。若当前元素小于目标值&#xff1a; 由于行递增&#xff0c;当前…...

警惕AI神话破灭:深度解析大模型缺陷与禁用场景指南

摘要 当前AI大模型虽展现强大能力&#xff0c;但其本质缺陷可能引发系统性风险。本文从认知鸿沟、数据困境、伦理雷区、技术瓶颈四大维度剖析大模型局限性&#xff0c;揭示医疗诊断、法律决策等8类禁用场景&#xff0c;提出可信AI建设框架与用户防护策略。通过理论分析与实操案…...

文件系统调用(上) ─── linux第17课

目录 linux 中man 2和man 3的区别 文件内容介绍 C语言文件接口 示例: 输出信息到显示器&#xff0c;你有哪些方法 总结: 系统文件I/O 文件类的系统调用接口介绍 示例 open 函数具体使用哪个,和具体应用场景相关&#xff0c; write read close lseek ,类比C文件相关接…...

go 标准库包学习笔记

本博文包含了go的math&#xff0c;net/http&#xff0c;fmt,io,csv&#xff0c;time.Time,strconv,strings,sync.Pool的学习,笔记多是其实战如何用&#xff0c;而非简单的函数式的讲解&#xff0c;可谓是收藏佳作&#xff0c;不时翻翻。 文章目录 1、math2、net/http3、fmt4、…...

Unity摄像机跟随物体

功能描述 实现摄像机跟随物体&#xff0c;并使物体始终保持在画面中心位置。 实现步骤 创建脚本&#xff1a;在Unity中创建一个新的C#脚本&#xff0c;命名为CameraFollow。 代码如下&#xff1a; using UnityEngine;public class CameraFollow : MonoBehaviour {public Tran…...

线程管理操作

1.创建两个线程&#xff0c;&#xff0c;分支线程1拷贝文件的前一部分&#xff0c;分支线程2拷贝文件的后一部分 #include <head.h>#define SRC_FILE "./1.txt" #define DST_FILE "./2.txt" #define BUFFER_SIZE 4096struct copy_args {long start;l…...

VSCode 2025最新前端开发必备插件推荐汇总(提效指南)

&#x1f31f;前言: 如果你是一名前端开发工程师&#xff0c;合适的开发工具能大大提高工作效率。Visual Studio Code (VSCode) 凭借其轻量级、高扩展性的特点&#xff0c;已成为众多前端开发者在win系电脑的首选IDE。 名人说&#xff1a;博观而约取&#xff0c;厚积而薄发。—…...

docker不停机部署

背景 最近做大疆项目时&#xff0c;后台更新部署时&#xff0c;机场和无人机就会掉线。设备自动重连注册时间比较长&#xff0c;应用长时间不可用。所以需要灰色发布服务。docker-compose的swarm模式可解决此问题。 服务构建脚本Dockerfile # 使用官方Java基础镜像&#xff…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...

k8s从入门到放弃之HPA控制器

k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率&#xff08;或其他自定义指标&#xff09;来调整这些对象的规模&#xff0c;从而帮助应用程序在负…...

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战:导出框架元素数据到Excel 在结构工程师的日常工作中,经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时,还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么? 一键点击,就能将ETABS中所有框架元素的基…...

【UE5 C++】通过文件对话框获取选择文件的路径

目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 &#xff0c;这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器&#xff0c;右键点击 .uproject 文件&#xff0c;选择 "Generate Visual Studio project files"&#xff0c;重…...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

论文阅读:Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...