vue中 .env .env.development .env.production 详细说明

1.配置文件有:

.env 全局默认配置文件,不论什么环境都会加载合并
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件

2.命名规则:

属性名必须以VUE_APP_开头,比如VUE_APP_XXX

在这里插入图片描述

3.关于文件的加载:

根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载

比如执行npm run serve命令,会自动加载.env.development文件

注意:.env文件无论是开发还是生成都会加载

在这里插入图片描述

如上图所示,如过我们运行npm run serve 在就先加载.env文件,之后加载.env.development文件,两个文件有同一个项,则后加载的文件就会覆盖掉第一个文件,即.env.development文件覆盖掉了.env文件的NOOE_ENV选项。

同理如果npm run build 就执行了.env和.env.production。

4.使用
(1)在vue文件中使用
在这里插入图片描述
注意:配置文件在vue模板文件的data之后加载

(2)在js文件中使用
在这里插入图片描述
备注:js文件中可以添加JSON.stringify(xxxxxx),解析成字符,但是vue中不能。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【BASH】回顾与知识点梳理(三十一)

【BASH】回顾与知识点梳理 三十一 三十一. 进程的管理31.1 给进程发送讯号kill -signal PIDlinux系统后台常驻进程killall -signal 指令名称 31.2 关于进程的执行顺序Priority 与 Nice 值nice :新执行的指令即给予新的 nice 值renice :已存在进程的 nice…

php+tcpdf生成pdf:中文乱码

亲测成功,感谢分享! 查看原文 TCPDF是一个生成PDF的不错的库,可惜,官方对包括中文在内的东亚字体支持不怎么样的。 场景:某项目需要根据数据库信息生成pdf格式的发票,考虑采用稳定的tcpdf,虽然…

uniapp的uview-plus组件库的导入

uniapp的vue3中使用uview-plus组件库。在插件市场中找到该组件并点击如下所示绿色按钮,弹出弹窗选择要导入的项目后,就会在uni_modules文件中生成如下文件内容 关于插件的下载区别,可参考:https://uniapp.dcloud.net.cn/compone…

信号

信号也是IPC中的一种,是和管道,消息队列,共享内存并列的概念。 本文参考: Linux中的信号_linux中信号_wolf鬼刀的博客-CSDN博客 Linux系统编程(信号处理 sigacation函数和sigqueue函数 )_花落已飘的博客-CSDN博客 Linu…

常用curl参数及样例讲解

1 缘起 后端/后台项目开发过程中,有两个阶段的接口测试和验证,自测阶段,通过Postman构建请求, 自建一些参数,测试功能以及边界条件,这些都是可以自行掌控的,当完成功能验证与前端对接时&#x…

进入微服务阶段后的学习方法

微服务SpringCloud学习的特点 陌生,多,复杂。 技术陌生,技术栈多,实现复杂。 学习方式 对于每一个组件: 1.知道是什么、有什么用 2.知道操作步骤(跟着讲义操作即可),包括&#…

Ubuntu系统安装指定版本内核

Git仓库 使用Ubuntu系统工具升级指定版本的内核 https://github.com/pimlie/ubuntu-mainline-kernel.sh下载 wget https://raw.githubusercontent.com/pimlie/ubuntu-mainline-kernel.sh/master/ubuntu-mainline-kernel.sh授权,移动到系统bin目录 chmod x ubunt…

19万字智慧城市总体规划与设计方案WORD

导读:原文《19万字智慧城市总体规划与设计方案WORD》(获取来源见文尾),本文精选其中精华及架构部分,逻辑清晰、内容完整,为快速形成售前方案提供参考。 感知基础设施 感知基础设施架构由感知范围、感知手…

正演的数值模拟(零基础,学习中)

摘要: 本贴从零开始学习正演的数值模拟方法. 1. 偏微分基础 引例: 物体从一维坐标的原点开始移动, 在 t t t 时刻, 它在坐标轴的位置由函数 s ( t ) s(t) s(t) 确定, 则速度为位置变化量与时间的比值: v ( t ) d s ( t ) d t lim ⁡ Δ t → 0 s ( t Δ t ) − s ( t )…

驱动开发点亮led灯

头文件 #ifndef __HEAD_H__ #define __HEAD_H__#define PHY_LED_MODER 0X50006000 #define PHY_LED_ODR 0X50006014 #define PHY_LED_RCC 0X50000A28 #define PHY_LED_FMODER 0X50007000 #define PHY_LED_FODR 0X50007014#endif驱动代码 #include <linux/init.h> #incl…

19-普通组件的注册使用

普通组件的注册使用-局部注册 一. 组件注册的两种方式:1.局部注册:只能在注册的组件内使用 (1) 创建 vue 文件(单文件组件) (2) 在使用的组件内导入,并注册 components:{ 组件名: 组件对象 } // 导入需要注册的组件 import 组件对象 from.vue文件路径 import HmHeader from ./…

.net 6 使用 NEST 查询,时间字段传值踩坑

0x01业务描述 说明: 同事搭建的业务系统,最开始使用 log4net 记录到本地日志. 然后多个项目为了日志统一,全部记录在 Elasticsearch ,使用 log4net.ElasticSearchAppender.DotNetCore. 然后搭建了 Kibanal 对 Elasticsearch 进行查询. 但是项目组开发人员众多,不是每个人…

使用 HTML、CSS 和 JavaScript 创建实时 Web 编辑器

使用 HTML、CSS 和 JavaScript 创建实时 Web 编辑器 在本文中&#xff0c;我们将创建一个实时网页编辑器。这是一个 Web 应用程序&#xff0c;允许我们在网页上编写 HTML、CSS 和 JavaScript 代码并实时查看结果。这是学习 Web 开发和测试代码片段的绝佳工具。我们将使用ifram…

Redis 工作总结

1.Redis是什么 Redis是互联网技术领域使用最为广泛的存储中间件&#xff0c;它是Remote Dictionary Service的首字母缩写&#xff0c;也就是远程字典服务。 2.Redis的用途&#xff1f; 2.1 计数器 2.2 缓存 2.3 分布式锁 2.4 消息中间件 3.Redis的数据类型 3.1 string&am…

如何找到一个数的所有质因数,以及如何快速判断一个数是不是质数

前情介绍 今天遇到一个需求&#xff1a;找到一个数所有的质因数。 初步解决 先定义一个判断质数的函数&#xff1a; def is_Prime(number):i 2count 0while i < number:if number % i 0 :count 1i 1if count > 0:return Falseelse:return True 接着定义一个寻找质…

搜索引擎 笔记

目录 1. 搜索引擎 笔记1.1. Google 为什么成功1.2. 做搜索引擎, 既复杂, 又简单 1. 搜索引擎 笔记 1.1. Google 为什么成功 科技行业一直有个原则, 即人们不会愿意改变自己的使用习惯。Ramaswamy 在采访中坦言, “我们面临的最大障碍之一, 确实就是扭转用户的固有习惯。人们忘…

Vue 2 Mixin 混入

混入&#xff08;Mixins&#xff09;是一种在Vue组件中重用代码的方式。它允许你定义一些可复用的选项对象&#xff0c;然后将这些选项合并到不同的组件中。混入可以用于在多个组件之间共享逻辑、方法、生命周期钩子等。 示例&#xff1a; <!DOCTYPE html> <html>…

【云原生】【k8s】Kubernetes+EFK构建日志分析安装部署

目录 EFK安装部署 一、环境准备&#xff08;所有主机&#xff09; 1、主机初始化配置 2、配置主机名并绑定hosts&#xff0c;不同主机名称不同 3、主机配置初始化 4、部署docker环境 二、部署kubernetes集群 1、组件介绍 2、配置阿里云yum源 3、安装kubelet kubeadm …

模型数据处理-数据放入 session和@ModelAttribute 实现 prepare 方法详细讲解

&#x1f600;前言 本文详细讲解了模型数据处理-数据放入 session和ModelAttribute 实现 prepare 方法详细讲解 &#x1f3e0;个人主页&#xff1a;尘觉主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是尘觉&#xff0c;希望我的文章可以帮助到大家&#xff0c…

LeetCode //C - 56. Merge Intervals

56. Merge Intervals Given an array of intervals where intervals[i] [ s t a r t i , e n d i ] [start_i, end_i] [starti​,endi​], merge all overlapping intervals, and return an array of the non-overlapping intervals that cover all the intervals in the in…