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 相关文章推荐
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
js获取 type=radio 值的方法
May 09 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 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/12/06 PHP
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
python3 深浅copy对比详解
2019/08/12 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
南京某公司笔试题
2013/01/27 面试题
某公司C#程序员面试题笔试题
2014/05/26 面试题
给老婆大人的检讨书
2014/02/24 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
员工保密协议书
2014/09/27 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
Python OpenCV实现图像模板匹配详解
2022/04/07 Python