解决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 valueOf 使用方法
Dec 28 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
javascript 闭包详解
Feb 15 Javascript
ES6数组的扩展详解
Apr 25 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
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
PHP实现时间轴函数代码
2011/10/08 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
回顾Javascript React基础
2019/06/15 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
让 python 命令行也可以自动补全
2014/11/30 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
python素数筛选法浅析
2018/03/19 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
Python实现word2Vec model过程解析
2019/12/16 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
蛋糕店的商业计划书范文
2014/01/27 职场文书
出生公证书样本
2014/04/04 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
预备党员公开承诺书
2014/05/28 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
超强台风观后感
2015/06/09 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书