解决vue打包 npm run build-test突然不动了的问题


Posted in Javascript onNovember 13, 2020

今天遇到一件很奇葩的事情

输入npm run build-test 突然停在这不动了 what? 不动了?!

解决vue打包 npm run build-test突然不动了的问题

后来google了一下 大家都是人才

运行一下这句话 就动了!!

npm config set registry http://registry.cnpmjs.org

补充知识:vue_test_unit_e2e常见问题npm run unit单元测试和npm run e2e集成测试问题

vue项目要进行unit和e2e常见问题

localStorage is not available for opaque origins

console.error node_modules\vue\dist\vue.runtime.common.dev.js

通常根据vue init webpack myproject 生成的项目,选择了unit和e2e模块后,都会有些问题。

1.首先是unit,当我们运行npm run unit时,会出现以下问题:

SecurityError: localStorage is not available for opaque origins

因为说是jest运行是node环境,所以没有localStorage。

解决办法:

在项目内test/unit/jest.conf.js文件中

加入以下3句:即可

testEnvironment: 'jsdom',
 verbose: true,
 testURL: 'http://localhost'

2.然后,如果你也使用了elementui模块, 也会报错以下:

console.error node_modules\vue\dist\vue.runtime.common.dev.js:621

[Vue warn]: Unknown custom element: <el-table> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

因为说是elementui的组件没有注册。

解决办法:

修改项目里面test/unit/setup.js文件,内容为以下:

import Vue from 'vue'
// 将Vue暴露到全局里面
global.Vue = Vue;
console.log('--global:',global.hasOwnProperty('Vue'))
Vue.config.productionTip = false

// 使用elementui组件
import ElementUI from 'element-ui';
// npm run unit 时要下面引入样式那句注释掉-不知为什么导入会报错。可能因为测试时,不需要css样式
// import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

项目demo源码在这:https://github.com/banana618859/vue_test_unit_e2e

拷贝下来后,npm i 然后npm run unit 或 npm run e2e即可

解决vue打包 npm run build-test突然不动了的问题

提醒

因为$mount处理不了用户交互,所以我们要用到vue官方推荐的@vue/test-utils安装一下,就可以在项目中使用了。

npm i @vue/test-utils -D

使用:在项目里 test/unit/spec/HelloWorld.spec.js文件中,

import HelloWorld from '@/components/HelloWorld.vue'
import { mount } from '@vue/test-utils'
describe('测试用helloworld组件',() => {
 it('测试点击后,msg的改变',() => {
   //点击一下
   let wrapper = mount(HelloWorld) // 用@vue/test-utils的mount加载组件
   wrapper.vm.newData = 1;
   wrapper.find('.btn').trigger('click') //触发按钮点击事件
   expect( wrapper.vm.msg ).toBe('test_if')
  })
})

以上这篇解决vue打包 npm run build-test突然不动了的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用 javascript 实现的点击复制代码
Mar 24 Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 #Javascript
解决vuex刷新数据消失问题
Nov 12 #Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 #Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 #Javascript
javascript实现搜索筛选功能实例代码
Nov 12 #Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 #Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 #Javascript
You might like
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
十天学会php之第九天
2006/10/09 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
php权重计算方法代码分享
2014/01/09 PHP
浅谈php调用python文件
2019/03/29 PHP
php的扩展写法总结
2019/05/14 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
理解JS绑定事件
2016/01/19 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
Django开发的简易留言板案例详解
2018/12/04 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
宿舍管理制度范本
2015/08/07 职场文书
Python访问Redis的详细操作
2021/06/26 Python