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_URLVUE_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启动和打包命令的更多相关文章

  1. Laravel 学习 .env文件 getenv 获得环境变量的值

    Laravel 学习 .env文件 getenv 获得环境变量的值  我们还需要对应用的 .env 文件进行设置,为应用指定数据库名称 sample. .env . . . DB_DATABASE=s ...

  2. 开发环境配置:jdk8的详细安装教程&&tomact的详细安装教程&&java环境变量的配置&&tomcat启动总失败原因

    1.下载 链接: http://pan.baidu.com/s/1i57HZKx 密码: cnb4 2.详细安装过程 3.下载地址 链接: http://pan.baidu.com/s/1mi6VUp ...

  3. MinGW中的头文件路径级环境变量设置

    整理自 MinGW中的头文件路径   C头文件目录%MINGW_PATH%/include下有头文件,里面有strcpy等c函数的声明. C++头文件目录%MINGW_PATH%/lib/gcc/mi ...

  4. flutter 添加全局环境变量

    flutter安装好了之后 要添加全局环境变量才可以在终端通过flutter命令来操作 安装flutter环境变量 vim ~/.bash_profile (不存在就创建,添加下面一行命令) expo ...

  5. Vue中利用$emit实现子组件向父组件通信

    Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...

  6. Linux编程 11(shell全局环境变量与局变环境变量)

    一.概述 在linux中,很多程序和脚本都通过环境变量来获取系统信息,存储临时数据,配置信息.环境变量是指用来存储有关shell会话和工作环境信息,允许你在内存中存储数据,以便程序或shell中运行的 ...

  7. mac OS配置用户全局环境变量(设置字符集为UTF8)

    mac OS系统跟linux系统一样也是将用户的全局环境变量保存在.bash_profile配置文件中,只是mac OS默认没有此文件. 1.创建.bash_profile文件 vi ~/.bash_ ...

  8. Mac 中环境变量的配置

    1. 基本了解 1.1. 查看当前path 在讲解Mac环境变量配置之前,大家可以打开dos框,输入 echo $PATH 查看当前的path. 本机结果: /usr/local/bin:/usr/l ...

  9. bootargs中的环境变量说明和一些常用的uboot命令

    bootargs中的环境变量说明和一些常用的uboot命令 一些常见的uboot命令:Help [command]在屏幕上打印命令的说明Boom [addr]启动在内存储器的内核Tftpboot通过t ...

随机推荐

  1. docker仓库之分布式harbor (一)

    1.harbor介绍 harbor是一个用于存储和分发docker镜像的企业级Registry服务器,由VMware开源.其通过添加一些企业必须的功能特性,例如安全,标识和管理,扩展了开源docker ...

  2. rar密码破解工具汇总

    rar密码破解工具汇总 前言 假如酷爱在网络上找各种资源的你,经历千辛万苦终于找到了一个rar打包的文件,兴奋地慌忙点击,可打开才发现是加密的,相信这样的场景很多人都遇到过,今天就针对压缩文件密码的破 ...

  3. 【转】理解Serverless

    理解Serverless No silver bullet. - The Mythical Man-Month 许多年前,我们开发的软件还是C/S(客户端/服务器)和MVC(模型-试图-控制器)的形式 ...

  4. 后端程序员之路 46、Redis Sentinel

    Sentinel - Redis 命令参考http://doc.redisfans.com/topic/sentinel.html#sentinel-api Guidelines for Redis ...

  5. HDOJ-1029(简单dp或者排序)

    Ignatius and the Princess IV hdoj-1029 这里主要是先排序,因为要找出现了一半以上的数字,所以出现的数字一定在中间 方法一: #include<iostrea ...

  6. 干货满满-原来这才是hooks-React Hooks使用心得

    序言 ---最后有招聘信息哦-React是一个库,它不是一个框架.用于构建用户界面的Javascript库.这里大家需要认识这一点.react的核心在于它仅仅是考虑了如何将dom节点更快更好更合适的渲 ...

  7. 为什么要从 Linux 迁移到 BSD 5

    为什么要从 Linux 迁移到 BSD 5 干净的分离 在 FreeBSD 的设计方式下,不同的组件组合在一起的,处理配置和调优,以及多年来开发和改进的所有工具,使得使用 FreeBSD 是一件很特别 ...

  8. 【LeetCode】2020-04 每日一题

    8. 字符串转换整数 (atoi)(中等) [分类]:模拟.正则表达式 [题解]: 解法1:直接模拟,但是在判断INT_MAX和INT_MIN上需要注意,因为直接判断会超出范围,所以可以将式子转换一下 ...

  9. 分子量(JAVA语言)

    package 第三章习题; /*  * 给出一种物质的分子式(不带括号)求分子量.  * 本题分子只包含4种原子,分别为C,H,O,N   * 分子量为分别为12.01,1.008,16.00,14 ...

  10. Python3+Pygame实现的射击游戏,很流畅,有音效

    之前看到过很多人写的飞机大战,当然了之前我也写过多个版本,总体来说功能是实现了,但总感觉不够"炫" 今天浏览Python资料的时候,意外发现了这个很好的"射击" ...