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 相关文章推荐
JavaScript中的eval()函数详解
Aug 22 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
jquery自适应布局的简单实例
May 28 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
JavaScript判断浏览器版本的方法
Nov 03 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
一个简单的域名注册情况查询程序
2006/10/09 PHP
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
一个实用的php验证码类
2017/07/06 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
Python测试模块doctest使用解析
2019/08/10 Python
基于pandas中expand的作用详解
2019/12/17 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
接待员岗位责任制
2014/02/10 职场文书
复试通知单模板
2015/04/24 职场文书
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技