详解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 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
小程序实现搜索框
Jun 19 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
JS实现碰撞检测效果
Mar 12 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防CC攻击实现代码
2011/12/29 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
php输入流php://input使用浅析
2014/09/02 PHP
php生成无限栏目树
2017/03/16 PHP
PHP递归的三种常用方式
2019/02/28 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
再探JavaScript作用域
2014/09/24 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
python实现决策树分类算法
2017/12/21 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
iPython pylab模式启动方式
2020/04/24 Python
python如何停止递归
2020/09/09 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
结构工程个人自荐信范文
2013/11/30 职场文书
机关节能减排实施方案
2014/03/17 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
市场部岗位职责
2015/02/12 职场文书
材料员岗位职责范本
2015/04/11 职场文书
公司回复函格式
2015/07/14 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
创业计划书之书店
2019/09/10 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server