详解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 相关文章推荐
js类型检查实现代码
Oct 29 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 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用数组返回无限分类的列表数据的代码
2010/08/08 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
Python正则简单实例分析
2017/03/21 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
opencv与numpy的图像基本操作
2019/03/08 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
致跳高运动员加油稿
2014/02/12 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
JavaScript 实现页面滚动动画
2021/04/24 Javascript
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL