vue报错汇总

Vue项目的常见报错

2022-01-17 11:44:08 更新   浏览量: 444
本章 下一章:vue使用errorHandle收集错误

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的时候:

  1. 检查节点是否使用了v-if或者v-show,如果初始化时节点并没有被渲染出来,那么是获取不到$ref的
  2. 是否在页面还没有渲染完成就获取$refs,此时应该写在mounted函数中,如果还是获取不到,则应该使用this.$nextTick(()=>{})
4、打包成dist文件以后,index.html加载空白

没有修改config配置文件,直接打包,系统默认的是’/’(根目录),而不是’./’(当前目录),从而导致路径不对,页面加载不出来。
针对vue-cli3.0以下版本的可以直接将config/index.js文件的assetsPublicPath: ‘/’;改为assetsPublicPath: ‘./’; 然后再重新打包一次就可以了。



对于vue-cli3.0及以上版本没有config配置文件的。需要自己在项目的根目录下手动建一个配置文件并添上以下代码:然后在重新打包一次就可以了。

module.exports = {
publicPath: './'
}

经过上面一番操作后,我点击导航栏它是这个样子的:


image.png

百度得知是我开发时路由的方式选的不同,才导致这样。

vue-router有3种路由模式:hash,history,adstract.
hash:使用URL hash值来做路由。支持所有浏览器,包括不支持HTML5 History Api 的浏览器。

hash实现原理:
早期的前端路由的实现就是基于location.hash来实现的,location.hash的值就是URL中的#后面的内容,
特性:
URL中的hash值只是客户端的一种状态,
hash值的改变,都会在浏览器的访问历史中增加一个记录,
可以通过a标签,并设置href属性,
我们可以使用hashchange事件来监听hash值的变化,从而对页面进行跳转(渲染)

history:依赖HTML5 History API和服务器配置,具体查看HTML5 History模式。
abstract:支持所有JavaScript运行环境,如Node.js服务器端,如果发现没有浏览器的API,路由会自动强制进入这个模式。
history实现原理:
HTML5提供了History API来实现URL的变化

具体解决办法:将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打包后,访问不到页面和访问不到图片

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

这是因为回调函数里面的参数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使用errorHandle收集错误

最近更新 免责声明 关于我们

Copyright © 2004-2021 前端教程 qianduan.cn All Rights Reserved   陕ICP备2021014585号-1 陕公网安备 61012402000223号 前端教程

友情链接:  前端工具 前端插件 前端小川