Vue项目常见的错误以及解决办法

news2025/1/21 12:19:49

错误分类

vue项目中遇到的问题大体上分为两类:一类是基础的语法错误,另一类就是其它错误
这里简单分享以下我在项目中遇到的错误和解决办法,如果你也有,希望对你会有帮助

GET http://dida100.com:8888/api/cart 401 (Unauthorized)

这类错误比较明显,当看到这条报错信息的时候,第一反应,就应该是没有登录

解决办法

重新登录,然后刷新即可解决报错

Error: Can’t resolve ‘…/views/WaterFal.vue’ in ‘C:\xiaomimi\src\router’

这个错误提示的也比较明显,有两种情况,一种是文件的路径不对,另一种是文件的名称不对

解决方法

在项目的文件夹里的router文件夹下的index.js文件内部找到对应的文件,查看路径或者文件名称,仔细对照即可
在这里插入图片描述

Access to XLHttpReaquest at "http:;/ /huaniangiancai.coml api/store/prodict/categrylst ’ from origin 'http:/localhost::8o/,#/categry:188e’ has been blocked by CORS policy: Response to preflight requiest doesn’t pass access control check: Redirect is not allowed for apreflight request.

这里出现了CORS,很明显,这是一个跨域问题,跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制,因为同源策略原因,导致不同源的网站不能相互访问对方的信息

解决办法

这时候,如何解决跨域问题呢,实现跨域的方法很多,这里推荐使用代理的方法实现跨域,基于后端的支持,在项目目录下的vue.config.js文件内部加上跨域的代理配置即可,这里需要注意:在vue.config.js文件被修改后一定要重启服务器,一定要重启服务器,一定要重启服务器,重要的事情强调三遍。
在这里插入图片描述

vue.runtime.esm.js?c320:4600 [Vue warn]: Property or method “joks” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

这个错误也比较常见,也是新手特别容易犯的错之一,…is not defined,意思是这个参数没有被定义,找不到,方法实现不了而导致报错

解决办法

这个也很好解决,因为是参数没有被定义,所以只需要去对应的文件里,在data内部定义该参数即可
在这里插入图片描述

[Vue warn]: Error invue.runtime.esm.js?c320:4600created hook : “TypeError: (0 ,utils_utils_js_WEBPACK_IMPORTED_MODULE_1_.default) is not a function”

这里出现了…is not a function,很明显这是个语法错误

解决办法

打开文件,仔细检查文件内部的内容,特别是括号和语法的使用,大括号或者小括号的写法,是否配对,语法是否错误等

项目进展过程中遇到的困难

数据访问问题

  • 刚开始写项目的时候,难免会遇到项目某个页面的数据访问不到的情况。最好的方法就是尝试各种方法,我到最后也算是访问到了数据,中间试过是不是网址的问题,网址没写正确,或是更改网址的配置项,看是否能获取到数据,最终还是正确的访问的到了数据

项目中的遍历,绑定

  • 很多时候在遍历的时候会忘记绑定关键的key,虽然编辑器会给出提示,但是这种错误还是不应该出现。
  • v-if有时候也是有点迷茫,不知道什么时候需要绑定,什么时候不需要绑定,后来综合发现,v-if使用的时候,一般情况下,当某个模块需要显示和隐藏的时候,就需要绑定v-if和v-else了,有的时候也会因为这个而报错,但是,这个绑定了就不会报错了。
  • 最经常犯的一个错误,就是图片的绑定,因为习惯的原因,很多时候敲习惯了,会习惯性的就写个src扔那了,但是因为这个,在渲染数据的时候,渲染不出来,因为在src的前边少了绑定,写成:src就可以了(:其实就是v-bind的缩写)

其它小错误

写项目的过程中,避免不了单词写错或者漏写的情况,很多时候,浏览器控制台并不会给你报错,但是页面上也不会有任何的东西,这时候就需要自己认认真真的复查自己的项目,看看是不是那个文件里的某个地方写错了。而且这种错误非常难找,要一行一行仔仔细细的看,有时候自己还看不出来,这时候就需要让别人帮你找找错误,因为自己的项目,往往自己找不到错误,但是别人可以很快的就找出自己的错误。当然,话虽这么说,有错误还是尽量自己找,对自己也是一种提升。

总结

  • 因为是初次写vue的项目,所以过程难免充满了艰辛,也会遇到很多的困难,但这并不妨碍我前进的脚步,我也会积极的去解决这些问题和bug,实在自己解决不了了,可以找同学和老师寻求帮助。
  • 经过这次的项目,感觉我自己成长了不少,虽然有些地方还不是很理解,但是我相信,在后边的项目进行中,我会慢慢的解决这些问题,这些问题也都将不再是问题。
  • 亲爱的陌生人,如果你再vue的项目中也有同样的问题,可以评论一下,我们一起探讨以下,互相学习,一起进步鸭。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408555.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【前端修炼场】 — HTML常用的标志语言

此文为【前端修炼场】第三篇,上一篇文章链接:上一篇 文章目录前言标志语言基本结构介绍声明介绍标签修饰编码形式常用HTML标签标题标签段落标签换行标识水平线标识加粗标识倾斜标识删除线标识下划线标识上标 / 下标标识总结前言 之前我们使用过的那些标…

React 面向组件编程(上)

目录前言:一、组件的基本理解和使用1. 函数式组件2. 类式组件3. 注意事项4. 渲染函数式组件标签的基本流程5. 渲染类组件标签的基本流程二、组件三大核心属性 1:state1. 代码示例2. 效果展示3. 注意4. 设置状态:setState三、 组件三大核心属性 2&#xf…

小程序问题:封装公共组件的onLoad方法不生效

素材编辑 | 宋大狮 排版运营 | 小唐狮 ONE 问题描述 因为许久没有接触小程序项目,今天在做小程序项目时,为了节省时间,将要修改的页面组件直接拿出来封装成了公共组件,同时也没多想就直接使用了。于是就出现了页面数据不能加载的…

模板字符串基本使用

模板字符串是ES6添加的一个新的字符串编写形式。 1.【模板字符串】之拼接 在ES6之前,如果我们想要将字符串和一些动态的变量拼接到一起,是很麻烦的。 const name "aaa" const age 18console.log("my name is "name".Im &q…

三个案例掌握this.$nextTick()方法的使用/Vue中的$nextTick()

this.$nextTick() 解释为在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM. 也就是说,当dom元素发生改变,重新渲染dom树后,再执行vue.$nextTick()里面的内容。 其实用方法一般为 this.$n…

讲讲vue3下会造成响应式丢失的情况

题引: 在我们从vue2过渡到vue3的时候,对于数据响应式的变化其实是懵懵懂懂的。从以往直接在data函数里面定义变量到每一次都要使用ref/reactive时,是有些不适应的。但问题不大,毕竟在大前端时代中,如果不及时跟上时代…

TS中快速定义一个对象数组以及处理async await的异常

定义一个对象数组(即数组成员为对象,对象的属性为我们所约束) 方法一:接口字面量形式 export type Resource {_id: string,personID: {_id: stringage: stringidentifier: stringname: stringnation: stringgrade: stringscheme…

contentEditable属性

前言 我们最常用的输入文本内容便是input与textarea,但是有一个属性,可以让我们在很多标签中,如div,table,p,span,body等,可以像input输入框一样,实现文本编辑,这便是contentEditable属性 contentEditabl…

【vue2】近期bug收集与整理01

🥳博 主:初映CY的前说(前端领域) 🌞个人信条:想要变成得到,中间还有做到! 🤘本文核心:记录博主在vue2中遇到过的坑,本文是博主的学习使用总结 目录 1登陆token的问…

【学姐面试宝典】前端基础篇Ⅴ——JS深浅拷贝、箭头函数、事件监听等

前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【前端面试专栏】 今天继续学习前端面试题相关的知识! 感兴趣的小伙伴一起来看看吧~🤞 文章目录什么是事件监听事件委托以及冒泡原理介绍一下 promise&#x…

uniapp 小程序嵌套H5开发总结

项目需求是在uniapp小程序项目中嵌套H5页面,H5返回小程序需要传值给小程序进行通信。 好,百度一查确实可以实现 用的uniapp提供的web-view(https://uniapp.dcloud.io/component/web-view.html#web-view经验证实,做功能之前先看官网&#xff…

一天时间迅速准备前端面试|JavaScript——异步进阶

🌈本系列文章是博主精心整理的面试热点问题,吸收了大量的技术博客与面试文章,总结多年的面试经历,带你快速建立前端面试知识体系。抓住每一场面试的机会,知己知彼才能百战百胜! 上期回顾 JS基础–异步 本系…

【中秋快乐】如何用three.js实现我的太空遐想3D网页

目录 创作背景 功能分解 创建3d地球 创建3d月球 创建3d小火箭

解决element-ui动态加载级联选择器默认选中问题(Cascader)

前言 最近在开发任务中碰到需要在新增和修改时使用动态加载级联选择器,但是当在修改时设置默认选中项,出现了后端数据返回较慢,导致无法选中和级联框选中了但input框不显示的问题,网上找到的方法也不是很有效,还得使用…

Vue - v-for 循环渲染多个 “重复“ 子组件(仅 ref 不同,this.$refs.xx 使用时依然能准确找到子组件)将子组件 ref 设为动态,这样每个子组件都是 “独立“ 的!详细教程

前言 本教程更多版本:uni-app | 微信小程序 我们会通过给组件绑定 ref 值,然后通过 this.$refs.xx 来获取这个组件上的方法和变量。 如果 在 v-for 中循环渲染组件(绑定固定 ref),那么这个 ref 就会 “一摸一样”,导致根本无法找到(this.$refs.xx 谁?), 要解决这个问…

【前端】vue模板语法知识了解一下,是不是只知道用element-ui组件?

vue写在前面Vue模板语法文本原始HTML属性开源Vue模板和主题框架集合BootstrapVueelement-ui最后总结写在前面 上一篇总结了在实操过程中如果遇到了nodejs版本的问题,我们该如何去解决的,还有就是总结了vue2和vue3生命周期的区别,如果感兴趣的…

【JavaScript】JS实用案例分享:动态生成分页组件 | 通过按键实现移动控制

CSDN话题挑战赛第2期 参赛话题:学习笔记 🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述&am…

React 路由v6 - 超全详解

React router v6 路由 已经习惯了 v5 版本的路由 ,那么 v6 版本的路由 该怎么应用呢? 文章目录React router v6 路由Ⅰ、路由 v6 (两种形式)Ⅱ、 动态路由Ⅲ、路由重定向Ⅳ、路由跳转 (两种形式)Ⅴ、路由懒加载Ⅰ、路由 v6 (两种形式) 方案一 &#xff…

JS原生——编写简易计算器

一个非常适合新手练习的小案例!!! 使用JS的ES5语法HTMLCSS及企业级代码规范,方便后续良好的代码习惯养成!!! 先来看一下样式吧!!!(后附代码&…

组件通信的6种方式

什么是组件通信 vue组件中关系说明: 如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系; B与C之间是兄弟关系;A与D、A与E之间是隔代关系; D与E是堂兄关系(非直系亲属) 针对以上关系我们归类为: 父…