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 uaMatch源代码
Feb 14 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 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中的Class的几点个人看法
2006/10/09 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
Python监控主机是否存活并以邮件报警
2015/09/22 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
python简单实现9宫格图片实例
2020/09/03 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
新书吧创业计划书
2014/01/31 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
大学生作弊检讨书
2014/09/11 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
邹越演讲观后感
2015/06/15 职场文书