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 文件传参及处理技巧分析
May 13 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
Angular2 组件交互实例详解
Aug 24 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
js实现无缝轮播图特效
May 09 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
Python中的条件判断语句基础学习教程
2016/02/07 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
python实现简单图书管理系统
2019/11/22 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
Python matplotlib可视化实例解析
2020/06/01 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript