详解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 相关文章推荐
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
详解React之key的使用和实践
Sep 29 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
js实现购物车商品数量加减
Sep 21 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 HtmlReplace输入过滤安全函数
2010/07/03 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
用python读写excel的方法
2014/11/18 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
Python中的__init__作用是什么
2020/06/09 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
pandas参数设置的实用小技巧
2020/08/23 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
英国著名书店:Foyles
2018/12/01 全球购物
教师绩效考核方案
2014/01/21 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
2014年商场工作总结
2014/11/22 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js