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 multiple全选与取消全选实现代码
Dec 04 Javascript
jquery获得keycode的示例代码
Dec 30 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
JSON相关知识汇总
Jul 03 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 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读取xml方法介绍
2013/01/12 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
Python中给List添加元素的4种方法分享
2014/11/28 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
python实现Floyd算法
2018/01/03 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
创意活动策划书
2014/01/15 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
法制教育演讲稿
2014/09/10 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
2014年接待工作总结
2014/11/26 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
音乐之声观后感
2015/06/04 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
JavaScript原型链详解
2021/11/07 Javascript
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
Python中的 enumerate和zip详情
2022/05/30 Python