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中的自定义指令
Dec 07 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue中activated的用法
Jan 03 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 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 如何向 MySQL 发送数据
2006/10/09 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
Script的加载方法小结
2011/01/12 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python中如何进行连乘计算
2020/05/28 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
大专应届生个人的自我评价
2013/11/21 职场文书
会计专业自我评价
2014/02/12 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
民事二审代理词
2015/05/25 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL