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 相关文章推荐
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
深入剖析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
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
php实例分享之二维数组排序
2014/05/15 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
Python入门篇之字符串
2014/10/17 Python
详解Python中的元组与逻辑运算符
2015/10/13 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
python怎么判断模块安装完成
2020/06/19 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
先进班级集体事迹材料
2014/01/30 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
教师个人读书活动总结
2014/07/08 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
旅行社计调工作总结
2015/08/12 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL
DIY胆机必读:各国电子管评价
2022/04/06 无线电
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python