vue-cli项目根据线上环境分别打出测试包和生产包


Posted in Javascript onMay 23, 2018

最近用vue-cli搭建了项目,准备上线时发现脚手架自带的npm run buil只能打出请求生产接口的生产包,但是项目肯定要先上测试环境,怎么用命令行打出请求测试接口的测试包呢?

Step1: package.json中新增命令行脚本test命令,并指向build文件夹下的test.js。

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "test": "node build/test.js"
 },

Step2. 在build文件夹中新建test.js,内容可以直接拷贝同目录build.js内容,修改一些参数。

vue-cli项目根据线上环境分别打出测试包和生产包

这样就多了一个test环境。

Step3. 在build文件夹中新建webpack.test.conf.js,内容可以直接拷贝同目录webpack.prod.conf.js内容,修改一些参数。

vue-cli项目根据线上环境分别打出测试包和生产包

这样构建时就会去config文件夹下的test.env.js寻找环境变量。

Step4.在config文件夹中新建test.env.js,内容可以直接拷贝同目录prod.env.js内容,修改一些参数。

vue-cli项目根据线上环境分别打出测试包和生产包

这样在npm run test 就能打出请求测试接口的测试包了。

可以在dist-->js-->app.js中查看是否打包成功。

vue-cli项目根据线上环境分别打出测试包和生产包

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
推荐20家国外的脚本下载网站
Apr 28 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
深入剖析Node.js cluster模块
May 23 #Javascript
Node.js进阶之核心模块https入门
May 23 #Javascript
使用 vue-i18n 切换中英文效果
May 23 #Javascript
centos 上快速搭建ghost博客方法分享
May 23 #Javascript
20个最常见的jQuery面试问题及答案
May 23 #jQuery
AngularJS与BootStrap模仿百度分页的示例代码
May 23 #Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 #jQuery
You might like
学习使用PHP数组
2006/10/09 PHP
967 个函式
2006/10/09 PHP
一个PHP的String类代码
2010/04/20 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
让你的网站可编辑的实现js代码
2009/10/19 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
vue中destroyed方法的使用说明
2020/07/21 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
python从子线程中获得返回值的方法
2019/01/30 Python
Python OS模块实例详解
2019/04/15 Python
基于python3实现倒叙字符串
2020/02/18 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
HTML5通用接口详解
2016/06/12 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
社区助残日活动总结
2014/08/29 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
合伙购房协议样本
2014/10/06 职场文书
民用住房租房协议书
2014/10/29 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL