Vue项目的常见报错问题解决
1、‘webpack-dev-server’ 不是内部或外部命令,也不是可运行的程序 或批处理文件
解决办法:
现在使用webpack要同时安装webpack-cli这个包,才可以调用webpack和webpack-dev-server这些命令。
cnpm install webpack webpack-dev-server webpack-cli --save-dev
2、"export 'default' (imported as 'ol') was not found in 'ol'
(黄色警告,但是不可忽略,会导致组件无法正常引用而不能使用)
解决办法:
导入方式改为: import * as G2 from '@antv/g2'
原因:动态组件无法识别第三方插件的引用,需要使用import * as 方法进行重命名
3、报“TypeError: that.$refs.videoItem.getBoundingClientRect is not a function“
在使用ref获取节点位置的时候报错
解决办法:
.$refs
拿到的是VueComponent,加个.$el
就能拿到了
let itemH= this.$refs.videoItem.$el.getBoundingClientRect().top;
拿不到$ref,报undefine的时候:
检查节点是否使用了v-if或者v-show,如果初始化时节点并没有被渲染出来,那么是获取不到$ref
的
是否在页面还没有渲染完成就获取$refs
,此时应该写在mounted函数中,如果还是获取不到,则应该使用this.$nextTick(()=>{})
4、打包成dist文件以后,index.html加载空白
没有修改config配置文件,直接打包,系统默认的是’/’
(根目录),而不是’./’
(当前目录),从而导致路径不对,页面加载不出来。
针对vue-cli3.0以下版本的可以直接将config/index.js文件的assetsPublicPath: ‘/’;
改为assetsPublicPath: ‘./’;
然后再重新打包一次就可以了。
对于vue-cli3.0及以上版本没有config配置文件的。需要自己在项目的根目录下手动建一个配置文件并添上以下代码:然后在重新打包一次就可以了。
module.exports = {publicPath: './'
}
经过上面一番操作后,我点击导航栏它是这个样子的:
百度得知是我开发时路由的方式选的不同,才导致这样。
具体解决办法:将router中的index.js 中的mode: "history"注释掉,然后再重新打包即可。
5、Vue.js前台报Uncaught (in promise) cancel错误解决办法
this.$confirm
方法内置promise方法,所以不能把.catch()去掉(因为取消操作时,无法捕获)
解决办法:
在this.$confirm
方法后加上.catch方法即可,注意要写上空方法体,我第一次没写没去掉
del: function (pageId) {
this.$confirm('您确认删除吗?', '提示', {}).then(() => {
//调用服务端接口
cmsApi.page_del(pageId).then(res => {if (res.success) {
this.$message.success("删除成功")
//刷新页面 this.query()
} else {this.$message.error("删除失败")
} }) }).catch(()=>{}); //注意这里,这里是重点!!!}
6、关于vue打包后,访问不到页面和访问不到图片
6、关于vue打包后,访问不到页面和访问不到图片
vue项目完成打包上线的时候很多人都会碰到静态资源找不到,常见的有两个
第一种:js,css路径不对
解决办法:打开config/index.js,将其中的assetsPublicPath值改为’./’
第二种:css中引用的图片资源找不到
我的项目文件中有一段css,其中引用了一个背景图片
“src/assets/”文件夹下有这张图片,打包后路径发生变化这个图片就找不到了,解决办法:
打开“build/utils.js”,增加一行代码即可
7、Module build failed (from ./node_modules/image-webpack-loader/index.js):Error: Cannot find module 'gifsicle
这是由于webpack-image-loader没有完全拉取下来:
webpack-image-loader依赖的四个图片处理库都需要拉取bin文件
"dependencies": {"imagemin-gifsicle": "^5.1.0",
"imagemin-mozjpeg": "^6.0.0",
"imagemin-pngquant": "^5.0.0",
"imagemin-svgo": "^5.2.1",
},
解决办法:
需要cnpm install webpack-image-loader
就能将 gifsicle 下载下来
8、Eslint 报错:Type of the default value for ‘data’ prop must be a function
在写形如prop: {type: Array; default: []}
的代码时,eslint常会出现这样的错误提示,
翻译: prop的默认值data必须是一个函数
解决办法:
修改方式1
props: {arr: {type: Array,default: function () { return [] }}}
修改方式2(es6)
props: {arr: {type: Array,
default: () => [] // es6的箭头函数
}
}
9、ReferenceError: _ is not defined
解决办法:
1、 npm install underscore --save
2、在 自己的组件内 引入 import _ from "underscore"
10、Eslint : Expected error to be handled
翻译为:Expected error to be handled
预期要处理的错误
这是因为回调函数里面的参数error没有运用到
解决办法:
所以可以不设置参数,或者在回调函数内console.log(error)
11、npm install 报错解决(To install them, you can run: npm install --save core-js/modules/es6.array)
解决办法:
cnpm install core-js@2
12、Browserslist: caniuse-lite is outdated. Please run next command npm update
解决办法:
cnpm update caniuse-lite删了node_modules/caniuse-lite和node_modules/browserslist两个文件夹cnpm i --save-dev caniuse-lite browserslist
12、npm run serve报错
Error loading C:\Users\30414\Desktop\work\jiuwei_cloud\artemis-plus\ vue.config.js:
ERROR ValidationError: Invalid options object. Ignore Plugin has been initialized using an options object that does not match the API schema.
options should be one of these:
object { resourceRegExp, contextRegExp?} | object { checkResource }
Details:
options misses the property ‘resourceRegExp’. Should be:
RegExp
-> A RegExp to test the request against.
options misses the property ‘checkResource’. Should be:
function
-> A filter function for resource and context.
解决办法:
vue.config.js:
configureWebpack: {plugins: [// Ignore all locale files of moment.js// new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),// 修改为这样:
new webpack.IgnorePlugin({resourceRegExp: /^\.\/locale$/,contextRegExp: /moment$/,}),createThemeColorReplacerPlugin(),],},
Vue项目的常见报错问题解决相关推荐
- Vue 开发中常见报错与处理
1. "xxxx" is assigned a value but never used.eslintno-unused-vars 错误原因:eslint的验证语法 解决办法:在错 ...
- Maven项目Dependencies常见报错及解决方案
个人最近项目中所遇到的问题,记录下便自己和同样遇到问题的小伙伴提供一个参考. 通常Maven里报红波浪线的常见问题 ①可能是子工程没有继承父工程 ②可能是导包智能提示一回车导致导错了包 ③Maven构 ...
- SpringBoot之项目运行常见报错
报错 1.Cannot resolve plugin org.apache.maven.plugins:maven-site-plugin:3.3 解决: File - Setting - Build ...
- hexo博客本地服务器显示正常,Hexo 搭建博客 本地运行 常见报错及解决办法
作为一名在hexo方面的新手,我在使用hexo编辑文档时遇到了很多问题,hexo generate编译的时候遇到了各种错误. 在此将这些错误及其解决方案记录下来,以便日后查证之用,同时,也可给各位在遇 ...
- ESlint 中常见报错的类型和解决方案
ESlint 中常见报错的类型和解决方案 这是我在使用 eslint 过程中遇到的一些问题,和自己总结的一些,希望对大家有帮助. vue 中 quotes 报错 :不能使用双引号 " &qu ...
- 微信小程序根据坐标点解析地址常见报错:请求来源未被授权
功能需求 微信小程序提供的接口能够获取到当前位置的坐标(经纬度),但是不能得到当前位置的地址.或者从后台获取到坐标(经纬度)要解析成文字描述的地址小程序也没有对应的接口. 实现思路 这时候就需要通过腾 ...
- Git常见报错及解决方法
git常见报错解决方法 1.warning: LF will be replaced by CRLF in .idea/workspace.xml. git config --global core. ...
- docker安装mysql及相关配置、运行细节和常见报错解决方案
安装.运行 需要特别注意-v挂载到本机的目录的权限问题,否则报错:ERROR 2002 (HY000): Can't connect to local MySQL server through soc ...
- java常问的报错_java常见报错及解决
Java常见报错信息: Java Exception: 1.Error 2.Runtime Exception 运行时异常 3.Exception 4.throw 用户自定义异常 异常类分两大类型:E ...
最新文章
- cookie记录用户的浏览商品的路径
- 拦截器获取请求参数post_「SpringBoot WEB 系列」RestTemplate 之自定义请求头
- 浅析大规模DDOS防御架构:应对T级攻防
- hi35 web服务器
- 无法启动此程序,因为计算机中丢失msvcrtd.dll,Win7打开剑灵提示“丢失d3dx10_43.dll、MSVCRTD.dll文件”怎么办?...
- 通用的Java hashCode重写方案
- leetcode之回溯backtracing专题4
- Spring IO platform
- OJ1080: a+b(多实例测试3)(C语言)
- Android RecyclerView 滑动到指定位置 RecyclerView 滑动到顶部
- 基于JQuery框架的AJAX
- objective-c 关键字和概念
- python 0xa_python在获取字节0xa或0xd后停止对文件的二进制读取
- mysql select count() count(1)_select count()和select count(1)的区别和执行方式讲解
- v-show在elementui中表格组件失效问题
- HDOJ--1728--逃离迷宫(广搜)
- 黑马品优购项目的总结二
- 人脸数据集汇总(附百度云盘链接)
- 记一次Android机顶盒破解工程
- omron欧姆龙NJ/NX程序 欧姆龙NJ501-1300,欧姆龙NB系列触摸屏
热门文章
- 如何报名拼多多官方活动?万顿思电商
- js 平面判断点在面内
- 手撕自动驾驶算法——IMU测量模型、运动模型、误差模型
- STM32系列 USART中断接收 注意事项 (USART_IT_ORE)
- 报表工具轻松搞定票据单据套打
- 亚马逊服务器配置php,在亚马逊AWS上建立Git服务器
- 为了让你们进阶 Canvas,我花 7 小时写了 3 个有趣的小游戏!!!
- android 6.0蓝牙服务开启,Android应用开发之Android 6.0 蓝牙搜索不到设备原因,MIUI权限申请机制方法...
- 碰到Maven依赖冲突脑壳疼?这个工具了解一下
- “数据科学家”或许不再性感,但“数据团队”的产业化才刚开始 | 专访领英全球数据科学团队负责人