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仿百度贴吧验证码特效实例代码
Jan 16 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
javascript数据类型详解
Feb 07 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
JS判断数组那点事
Oct 10 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 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
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
PHP引用的调用方法分析
2016/04/25 PHP
Yii核心验证器api详解
2016/11/23 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
Js组件的一些写法
2010/09/10 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
Python程序设计入门(1)基本语法简介
2014/06/13 Python
分享Python文本生成二维码实例
2016/01/06 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
遇到的Mysql的面试题
2014/06/29 面试题
财务总经理岗位职责
2014/02/16 职场文书
食品采购员岗位职责
2014/04/14 职场文书
和解协议书
2014/04/16 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
volatile保证可见性及重排序方法
2022/08/05 Java/Android