详解vue-cli3多环境打包配置


Posted in Javascript onMarch 28, 2019

最近下载了vue-cli3,研究了下vue-cli3下多环境的配置。

首先,安装vue-cli3。

npm install -g @vue/cli

安装好之后的项目是这样的,见下图:

详解vue-cli3多环境打包配置

相比较vue-cli2的项目,缺少了build和config目录,另外static目录也没了,多了个public目录。

配置文件需要自己写一个vue.config.js,可以参考官方文档文档写,网址

https://cli.vuejs.org/zh/config/

现在说重点,怎么配置多环境。打开package.json文件,见下图:

详解vue-cli3多环境打包配置

在scripts里面修改环境配置,可以根据自己的项目来修改对应的环境,见下图:

详解vue-cli3多环境打包配置

修改完之后在项目根目录创建对应的文件,文件名以.env开头后面跟上.name,例如:.env.fat

详解vue-cli3多环境打包配置

在.env.fat里写上自己想写的配置,见下图:

详解vue-cli3多环境打包配置

注意:需要以VUE-APP_开头,后面的名字可以随意。我这里设置了一个VUE_APP_APP_HOST 来存储对应的服务器API地址。

最后,执行npm run fat 即可将.env.fat 文件里的配置带入到项目中,在Vue项目中可以使用process.env.Vue_APP_APP_HOST 来使用.env.fat 里设置的Vue_APP_APP_HOST,其他以Vue_APP_开头的设置也可以读取到。

以上所述是小编给大家介绍的vue-cli3多环境打包配置详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
jquery实现pager控件示例
Apr 09 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 #Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 #Javascript
详解一个基于套接字实现长连接的express
Mar 28 #Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 #Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 #Javascript
深入理解es6块级作用域的使用
Mar 28 #Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 #Javascript
You might like
谈谈PHP语法(4)
2006/10/09 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
如何把python项目部署到linux服务器
2020/08/26 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
岗位职责怎么写
2014/03/14 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
优秀班组申报材料
2014/12/25 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android