vue项目多环境配置(.env)的实现


Posted in Vue.js onJuly 21, 2021

没接触多环境配置前,感觉好高大上,真正操作后感觉也就那么回事,在此把自己遇到的问题和解决方案叙述一下,有不对的地方欢迎各位大佬指出。

什么是多环境配置,为什么要多环境配置?

最常见的多环境配置,就是开发环境配置,和生产环境配置(也就是上线的配置),很多情况下我们开发环境下的域名,和一些配置项,和我们生产模式下的不同,这个时候就需要我们进行多环境配置,不然每次发版都要改一波数据多麻烦。另一种情况就是你两个项目是用的一套代码,但是最后又要分别打成不同的包,那么这个时候多环境配置就大大提升了开发效率。

.env 文件配置到哪里

.env文件配置在你项目的根目录里面和package.json同级如下图。

vue项目多环境配置(.env)的实现

.env文件如何配置,配置多少个?

.env文件如何命名?
最开始我在网上查的时候好多博主说名字必须命名成
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
其实不是的,如果你配置的是开发环境和生产环境那么这样命名,无可厚非,但是你如果是多项目公用代码,这样命名就有点驴头不对马嘴。所以这块的命名格式只需要文件开头为.env即可,后面的名字你想怎样都可以

.env文件的配置

这块就是你想用什么东西就配置什么东西,打个比方我想在项目全局拿到一个名字,那你就直接.env里面配置就ok了,下面我会详细叙述如何取值。

npm run serve 或者npm run build 的时候,会默认走.env的配置

图示:

vue项目多环境配置(.env)的实现

//这块只需要 VUE_APP_*** 以这样的形式命名就ok了,后面大写还是小写这块看你心情都可以。
VUE_APP_NAME = '娄渊洋'
VUE_APP_HTTPS = 'http://www.louhc.com/'
VUE_APP_ABBREVIATION = 'louhc'
VUE_APP_LOGO = 'louhc'

默认的.env文件配置好后,我们接着配置有特殊需求的.env文件,比如我想让在另一种环境下使用 其他的名字。例如 .env.bsy文件 .bsy是我随便写的名字这块可以自定义。

//这块只需要 VUE_APP_*** 以这样的形式命名就ok了,后面大写还是小写这块看你心情都可以。
VUE_APP_NAME = '白衫云'
VUE_APP_HTTPS = 'http://www.louhc.com:82/'
VUE_APP_ABBREVIATION = 'bsy'
VUE_APP_LOGO = 'bsy'

依次类推你想配置多少个都可以
.env文件配好后我们就该配置运行环境了

如何配置运行环境

找到package.json文件,如下图

vue项目多环境配置(.env)的实现

build: 和 serve: 后面跟的名字就是你随便起的名字一定要对应上,这在运行的时候才能找到相应的配置项。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:bsy": "vue-cli-service build --mode bsy",
    "build:kthz": "vue-cli-service build --mode kthz",
    "serve:bsy": "vue-cli-service serve --mode bsy",
    "serve:kthz": "vue-cli-service serve --mode kthz",
  },

再次多说一点:.env是默认配置项,当运行环境配置项的时候,会将默认配置项和运行的环境配置项融合,在参数相同的情况下,会以环境配置项为主,简单来说就是,默认配置项存在,环境配置项也存在,这个时候运行哪个环境配置项,就以哪个环境配置项的值为准,如果默认配置项存在,环境配置项不存在,那么运行环境配置项的时候同样也可以拿到默认配置项的值。

如何获取全局配置项的值

例子:如何我想在js中拿到 VUE_APP_NAME = ‘娄渊洋',那么这直接在你想赋值的地方写上这行代码即可 process.env.VUE_APP_NAME

console.log(process.env.VUE_APP_NAME)// 默认环境下打印的就是娄渊洋 bsy 环境下就是 白衫云

如果我们项在html中使用全局配置项的值,需要我们先在return 中赋值一下,然后 才可以通过 {{}},拿到你想要用的值。

如何运行环境

运行默认环境 npm run serve
运行指定的环境 npm run serve:bsy
默认环境打包 npm run build
指定环境打包 npm run build:bsy
只需切换不同的环境名即可

到此这篇关于vue项目多环境配置(.env)的实现的文章就介绍到这了,更多相关vue 多环境配置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
Vue 的 v-model用法实例
Nov 23 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 #Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 #Vue.js
Vue项目打包、合并及压缩优化网页响应速度
idea编译器vue缩进报错问题场景分析
Vue实现导入Excel功能步骤详解
Vue图片裁剪组件实例代码
vue3中provide && inject的使用
Jul 01 #Vue.js
You might like
php数据库抽象层 PDO
2011/05/07 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
python装饰器实例大详解
2017/10/25 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
大学生职业生涯规划方案
2014/01/03 职场文书
生活小常识广播稿
2014/09/16 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
庭外和解协议书
2016/03/23 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby