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学习笔记之八 继承和事件基础
Jan 08 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
js实现简单的点名器随机色实例代码
Sep 20 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
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python线程的两种编程方式
2015/04/14 Python
Python中__new__与__init__方法的区别详解
2015/05/04 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
会计实习期自我鉴定
2013/10/06 职场文书
2014年党委工作总结
2014/11/22 职场文书
男方婚礼答谢词
2015/01/20 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
教师节主题班会方案
2015/08/17 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
CSS的calc函数用法小结
2022/06/25 HTML / CSS