.env 文件

news2025/1/30 15:53:14

.env 文件配置 文件说明

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

注意:三个文件的文件名必须按上面方式命名,不能乱起名,否则读取不到文件。

在这里插入图片描述
注意:属性名必须以 VUE_APP_ 开头,如:VUE_APP_XXX
在这里插入图片描述

加载

vue 会根据启动命令自动加载相对应的环境配置文件。vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加载哪个文件”
比如执行npm run serve命令,会自动加载.env.development文件
开发环境加载 .env 和 .env.development 。
生成环境加载 .env 和 .env.production 。
运行npm run serve的时候主要还是看package.json中 server属性的–mode后面跟的是啥。如果是development,就会加载.env.development文件。
在package.json里面配置好,执行serve的时候用开发环境的。build打包用生产或者测试的
package.json 配置项: 二选一

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build",
    "build:sit": "vue-cli-service build --mode production.sit",
    "build:uat": "vue-cli-service build --mode production.uat",
    "build:prod": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint",
    "et": "node_modules/.bin/et",
    "et:init": "node_modules/.bin/et -i",
    "et:list": "gulp themes"
  }
"scripts": {
    "serve-test": "vue-cli-service serve --open --mode test",
    "serve": "vue-cli-service serve --open --mode development",
    "dev": "vue-cli-service  --open --mode development  serve",
    "test-oss": "vue-cli-service  --mode sit  build",
    "build:sit": "vue-cli-service  --mode sit  build",
    "build:prod": "vue-cli-service  --mode production  build",
    "lint": "vue-cli-service lint",
    "fix": "tslint --fix -c ./tslint.json 'src/**/*{.ts,.tsx}'"
 }

.env.development的文件。在地址上面一行加一个NODE_ENV=development

项目中的使用

在配置文件中定义的属性在其它文件中如何访问呢??
可以使用 process.env.xxx 来访问属性。
如:
在这里插入图片描述

1,npm run serve,启动项目,并且加载.env和.env.development文件
2,npm run serve-test,启动项目,并且加载.env和.env.test文件
3,npm run build,生产环境打包,其中.env和.env.production文件会加载
4,npm run test,测试环境打包,其中.env和.env.test文件会加载
5,npm run all,生产环境和测试环境同时打包,加载不同的.env文件

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

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

相关文章

推荐10个基于Vue3.0全家桶的优秀开源项目

目录 PPTist vue-next-admin Vue vben admin VUE3-MUSIC vue-pure-admin vue3-composition-admin newbee-mall-vue3-app Element Plus vue3-bigData cool-admin-vue 今天来分享 10 个基于 Vue3.0 全家桶的优秀开源项目! PPTist PPTist 是一个基于 Vue3.…

【Vue路由(router)进一步详解】

Vue路由(router)进一步详解query属性具体实例代码如下:params属性具体实例代码如下:props属性replace属性编程式路由导航路由缓存具体代码:总结本篇文章主要针对已经掌握Vue路由(router)基础以及…

Vue业务组件封装(二)Form表单

前言 这个系列主要是分享自己在工作中常用到的业务组件,以及如何对这些组件进行有效的封装和封装的思路。注:都是基于element ui进行二次封装。 封装组件的基本方法就是通过props和emit进行父子组件的传值和通信。利用插槽、组件等增加组件的可扩展性和复…

JavaScript实现留言板

目录 1.案例说明: 2.html部分 3.css部分 4.js代码 5.全部代码 6.效果图: 1.案例说明: 利用JavaScript、css以及html制作一个简易的留言板 要求在页面文本框中输入一些文字之后,点击“提交”按钮,就可以让输入的…

React+Mobx|综合项目实践(附项目源码、地址)

欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥 R e a c t 框架 React框架 Reac

【学姐面试宝典】前端基础篇Ⅳ(JavaScript)

前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【前端面试专栏】 今天继续学习前端面试题相关的知识! 感兴趣的小伙伴一起来看看吧~🤞 文章目录webpack 的作用什么是按需加载如何理解前端模块化讲讲 JS 的语…

npm i 报错及解决方案

目录报错案例1报错案例2报错案例3报错案例4报错案例5报错案例1 npm ERR! Cannot read properties of null (reading pickAlgorithm)解决方案:清理缓存后再次安装 npm cache clear --force报错案例2 npm ERR! gyp info it worked if it ends with ok ... npm ERR!…

前端使用lottie-web,使用AE导出的JSON动画贴心教程

Lottie简介 官方介绍:Lottie是一个库,可以解析使用AE制作的动画(需要用bodymovie导出为json格式),支持web、ios、android、flutter和react native。 在web端,lottie-web库可以解析导出的动画json文件,并将其…

【博主推荐】html好看的图片轮播多种风格(源码)

html好看的图片轮播多种风格所有轮播图动态效果展示1.普通自带按钮切换轮播图1.1 效果展示1.2 源码2.自动切换图片2.1 效果展示2.2 源码3.鼠标拖动切换图片3.1 效果展示4.数字按钮拖动切换图片4.1 效果展示5.图片带缩略图5.1 效果展示6.上下拖动切换图片6.1 效果展示7. 3D切换图…

X-Frame-Options简介

最近安全检查,发现没有保障和避免自己的网页嵌入到别人的站点里面,于是需要设置X-Frame-Options增加安全性。 网上查了查资料,这里记录一下。 可以使用下面工具进行验证:Clickjacking Tool | Test | UI Redressing 1、X-Frame-Op…

3.js中判断数组中是否存在某个对象/值,判断数组里的对象是否存在某个值 的五种方法 及应用场景|判断数组里有没有某对象,有不添加,没有则添加到数组

3.js中判断数组中是否存在某个对象/值,判断数组里的对象是否存在某个值 的五种方法 及应用场景 一、当数组中的数据是简单类型时: 应用js中的indexof方法:存在则返回当前项索引,不存在则返回 -1。 var arr[1,2,3,4]var str2// …

ECharts设置双x轴

下面给大家分享一下ECharts的几种功能,循序渐进地实现一个复杂的曲线图。 V1.0: 代码: let option {title: { text: V1.0 },legend: { data:[销量] },// x轴的数据xAxis: {data: ["王","胡歌","曾小贤",&q…

Vue3使用axios的配置教程详解

1.安装 npm install --save axios vue-axios2.在src根目录创建service文件夹。然后创建axios.js 2.1在axios.js添加拦截器,请求拦截:initAxios.interceptors.request;响应拦截:initAxios.interceptors.response import axios from "axios";const initAxios axios.…

用idea创建vue项目

目录 一、安装node.js (1)下载安装包 (2)测试node.js是否安装成功 (3)安装vue和全局vue-cli 二、idea安装vue.js插件 三、创建vue项目 四、修改配置文件 五、配置idea运行的环境 一、安装node.js …

ERROR: npm v9.4.1 is known not to run on Node.js v8.13.0.

前面全是废话,大家可以直接看序号8下面的nvm的命令以及序号11之后的问题解决,希望能帮助到你们!是个什么问题呢?昨天领导给了个前后端分离的项目,让不才我搭建一下环境,我兴高采烈的拿着项目搭建手册按照文…

微信小程序开发 app.json全局配置

JSON 是一种数据格式,在实际开发中,JSON 总是以配置文件的形式出现。app.json 是当前小程序的全局配置,可以通过app.json对小程序项目进行设置所有页面路径、窗口外观、界面表现、底部 tab 等。{"pages": ["pages/index/index…

vue中实现文件批量打包压缩下载(以及下载跨域问题分析)

上次做了一个选择多个数据生成多个二维码并下载,当时项目催的紧,就简单写了个循环生成二维码下载,一次性会下载很多文件,特别难整理; 刚好这次项目又遇到类似这种功能,需要一次性批量下载多个文件&#xf…

浅谈uniapp的flex布局

文章目录1 flex布局1.1 flex-direction1.2 flex-wrap1.3 justify-content1.4 align-items1.5 align-content属性1.6 其他项目属性1.6.1 order属性1.6.2 flex-grow属性1.6.3 flex-shrink属性1.6.4 flex属性1 flex布局 ​ flex是Flexible Box的缩写,意为”弹性布局”…

TypeError: this.$message is not a function报错情况解决

在最近负责的一个前端项目中,使用this.$message报错了,之前也没注意,然后这次抽空看了一下问题 报错原因是因为我用了这种提示写法: 首先,我最开始是用基础写法: 但是这种写法有个弊端,就是如…

【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】上篇

⌚️⌚️⌚️个人格言:时间是亳不留情的,它真使人在自己制造的镜子里照见自己的真相! 📖Git专栏:📑Git篇🔥🔥🔥 📖JavaScript专栏:📑js实用技巧篇…