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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
了解jQuery技巧来提高你的代码
Jan 08 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 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
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
分析Python中解析构建数据知识
2018/01/20 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
django中使用POST方法获取POST数据
2019/08/20 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
如何理解python对象
2020/06/21 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
在家更换处方镜片:Lensabl
2019/05/01 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
班干部竞选演讲稿
2014/04/24 职场文书
赔偿协议书范本
2014/09/12 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
Vue h函数的使用详解
2022/02/18 Vue.js