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 ...
随机推荐
- docker仓库之分布式harbor (一)
1.harbor介绍 harbor是一个用于存储和分发docker镜像的企业级Registry服务器,由VMware开源.其通过添加一些企业必须的功能特性,例如安全,标识和管理,扩展了开源docker ...
- rar密码破解工具汇总
rar密码破解工具汇总 前言 假如酷爱在网络上找各种资源的你,经历千辛万苦终于找到了一个rar打包的文件,兴奋地慌忙点击,可打开才发现是加密的,相信这样的场景很多人都遇到过,今天就针对压缩文件密码的破 ...
- 【转】理解Serverless
理解Serverless No silver bullet. - The Mythical Man-Month 许多年前,我们开发的软件还是C/S(客户端/服务器)和MVC(模型-试图-控制器)的形式 ...
- 后端程序员之路 46、Redis Sentinel
Sentinel - Redis 命令参考http://doc.redisfans.com/topic/sentinel.html#sentinel-api Guidelines for Redis ...
- HDOJ-1029(简单dp或者排序)
Ignatius and the Princess IV hdoj-1029 这里主要是先排序,因为要找出现了一半以上的数字,所以出现的数字一定在中间 方法一: #include<iostrea ...
- 干货满满-原来这才是hooks-React Hooks使用心得
序言 ---最后有招聘信息哦-React是一个库,它不是一个框架.用于构建用户界面的Javascript库.这里大家需要认识这一点.react的核心在于它仅仅是考虑了如何将dom节点更快更好更合适的渲 ...
- 为什么要从 Linux 迁移到 BSD 5
为什么要从 Linux 迁移到 BSD 5 干净的分离 在 FreeBSD 的设计方式下,不同的组件组合在一起的,处理配置和调优,以及多年来开发和改进的所有工具,使得使用 FreeBSD 是一件很特别 ...
- 【LeetCode】2020-04 每日一题
8. 字符串转换整数 (atoi)(中等) [分类]:模拟.正则表达式 [题解]: 解法1:直接模拟,但是在判断INT_MAX和INT_MIN上需要注意,因为直接判断会超出范围,所以可以将式子转换一下 ...
- 分子量(JAVA语言)
package 第三章习题; /* * 给出一种物质的分子式(不带括号)求分子量. * 本题分子只包含4种原子,分别为C,H,O,N * 分子量为分别为12.01,1.008,16.00,14 ...
- Python3+Pygame实现的射击游戏,很流畅,有音效
之前看到过很多人写的飞机大战,当然了之前我也写过多个版本,总体来说功能是实现了,但总感觉不够"炫" 今天浏览Python资料的时候,意外发现了这个很好的"射击" ...