vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
1,前言
分享一下vue项目中利用.env
文件存储全局环境变量,以及利于项目开发的vue
启动以及打包命令。
2,.env文件的作用
在vue
项目中,env
是全局配置文件,可以存储不同环境下的变量。使用vue-cli
搭建项目,默认会在根目录创建一个.env
文件,如果需要更多类型的.env
文件,需要自行创建。
其中:
1
,.env 后缀的文件是全局默认配置文件,不论什么环境都会加载并合并。
2
,.env.development 是开发环境下的配置文件,仅在开发环境加载。
3
,.env.production 是生产环境下的配置文件(也就是正式环境),仅在生产环境加载。
以上三个命名不能变动,除此之外,可以另外自定义加上.env.test
文件,也就是测试环境,或者.env.bata
,也就是内部测试版,等等...
3,配置.env文件
变量命名必须以VUE_APP_
开头,比如VUE_APP_URL
,VUE_APP_PWD
4,配置启动命令
在vue项目根目录下,找到package.json文件,其中scripts对象是配置的vue启动命令,比如npm run dev,配置如下:
"scripts": {
"serve": "vue-cli-service serve",
"serve-test": "vue-cli-service serve --mode test",
"build": "vue-cli-service build",
"test": "vue-cli-service build --mode test",
"all": "vue-cli-service build && vue-cli-service build --mode test"
}
每一行说明如下:
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文件
5,获取.env中的全局变量
比如,我在.env文件中设置了变量VUE_APP_BASE_URL = 'https://www.baidu.com'
,在项目中我想获取,只需要使用process.env.VUE_APP_BASE_URL
,就可以取到。
5,实际用处
个人觉得最大的用处就是不同环境加载不同的变量,比如开发环境和测试、正式环境的请求域名不同,直接在.env
文件中定义一个全局的URL
,在请求封装中使用,很方便。
如果看了觉得有帮助的,我是@鹏多多,欢迎 点赞 关注 评论;
END
往期文章
个人主页
vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令的更多相关文章
- Laravel 学习 .env文件 getenv 获得环境变量的值
Laravel 学习 .env文件 getenv 获得环境变量的值 我们还需要对应用的 .env 文件进行设置,为应用指定数据库名称 sample. .env . . . DB_DATABASE=s ...
- 开发环境配置:jdk8的详细安装教程&&tomact的详细安装教程&&java环境变量的配置&&tomcat启动总失败原因
1.下载 链接: http://pan.baidu.com/s/1i57HZKx 密码: cnb4 2.详细安装过程 3.下载地址 链接: http://pan.baidu.com/s/1mi6VUp ...
- MinGW中的头文件路径级环境变量设置
整理自 MinGW中的头文件路径 C头文件目录%MINGW_PATH%/include下有头文件,里面有strcpy等c函数的声明. C++头文件目录%MINGW_PATH%/lib/gcc/mi ...
- flutter 添加全局环境变量
flutter安装好了之后 要添加全局环境变量才可以在终端通过flutter命令来操作 安装flutter环境变量 vim ~/.bash_profile (不存在就创建,添加下面一行命令) expo ...
- Vue中利用$emit实现子组件向父组件通信
Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...
- Linux编程 11(shell全局环境变量与局变环境变量)
一.概述 在linux中,很多程序和脚本都通过环境变量来获取系统信息,存储临时数据,配置信息.环境变量是指用来存储有关shell会话和工作环境信息,允许你在内存中存储数据,以便程序或shell中运行的 ...
- mac OS配置用户全局环境变量(设置字符集为UTF8)
mac OS系统跟linux系统一样也是将用户的全局环境变量保存在.bash_profile配置文件中,只是mac OS默认没有此文件. 1.创建.bash_profile文件 vi ~/.bash_ ...
- Mac 中环境变量的配置
1. 基本了解 1.1. 查看当前path 在讲解Mac环境变量配置之前,大家可以打开dos框,输入 echo $PATH 查看当前的path. 本机结果: /usr/local/bin:/usr/l ...
- bootargs中的环境变量说明和一些常用的uboot命令
bootargs中的环境变量说明和一些常用的uboot命令 一些常见的uboot命令:Help [command]在屏幕上打印命令的说明Boom [addr]启动在内存储器的内核Tftpboot通过t ...
随机推荐
- python实现斑马打印机网络打印
最近一个礼拜调研了下斑马打印机怎样实现网络打印. 缘起: 之前实现打印方式是直接使用USB接口连接PC,使用串口通讯提供一套打印服务,在系统界面配置相关参数,即可调用打印服务: 后来业务需求变化,现场 ...
- POJ-2502(Dijikstra应用+最短路)
Subway POJ-2502 这里除了直接相连的地铁站,其他图上所有的点都要连线,这里是走路的速度. 记住最后的结果需要四舍五入,否则出错. #include<iostream> #in ...
- 【资源下载】Linux下的Hi3861一站式鸿蒙开发烧录(附工具)
下载附件 2021春节前夕,华为发布了 HUAWEI DevEco Device Tool 2.0 Beta1,整体提供了异常强大的功能.得知消息后,我在第一时间带着无比兴奋的心情下载尝鲜,但结果却是 ...
- 谈谈注册中心 zookeeper 和 eureka中的CP和 AP
谈谈注册中心 zookeeper 和 eureka中的CP和 AP 前言 在分布式架构中往往伴随CAP的理论.因为分布式的架构,不再使用传统的单机架构,多机为了提供可靠服务所以需要冗余数据因而会存在分 ...
- 选择 FreeBSD 而不是 Linux 的技术性原因3
选择 FreeBSD 而不是 Linux 的技术性原因3 jail FreeBSD Jails 系统是另一个惊人的工程壮举. 在 2000 年 3 月 14 日的 4.0 版本中,FreeBSD 引入 ...
- WPF 基础 - 图片与 base64
1. base64 转图片 将 base64 转成 byte[] 将 byte[] 作为内存流保存到一个 BitmapImage 实例的流的源 把 BitmapImage 作为目标图片的 Source ...
- Java数组:多维数组(二维),Arrays类,冒泡排序
Arrays类数组工具类:java.util.ArraysArrays类中的方法都是static修饰的静态方法,在使用的时候可以直接使用类名进行调用,而"不用"使用对象来调用 具有 ...
- Java BasicNameValuePair怎么传数组类型的参数?
BasicNameValuePair 传数组的话可以这样传 map.put("ids[]", 1); map.put("ids[]", 2);
- java IO NIO BIO 最权威的总结
1. BIO (Blocking I/O) 1.1 传统 BIO 1.2 伪异步 IO 1.3 代码示例 1.4 总结 2. NIO (New I/O) 2.1 NIO 简介 2.2 NIO的特性/N ...
- 使用jhipster 加速java web开发
jhipster,中文释义: Java 热爱者! JHipster is a development platform to quickly generate, develop, & depl ...