Vue项目常见报错问题汇总 项目经验

Vue项目经验总结

1.环境&资源问题

1.1.如果生成私钥提示没有这个目录

一般git安装成功之后，会在C:\Users\下创建.ssh目录。如果没有就会出现上述问题。
检查是否安装成功：cmd中执行：git --version (两个-)
如果没有正确提示版本号，则配置一下git环境变量（看问题1.5）
如果电脑用户名是中文名字，需要修改为英文
https://jingyan.baidu.com/article/59703552843c458fc0074005.html
可能是中文名字，导致没有创建.ssh目录
如果改完电脑用户名之后，执行ssh-keygen还是不行的话，就重装git
但是经过测试，很多同学的电脑用户名都无法修改，如果是这样，只能重装系统_{_}
给电脑起中文名，多么痛的领悟…

1.2.无法导入mydb.sql问题

解决方法：

1. 找到my.ini文件 ；

2. 修改内部的数据库引擎为INNODB
   #默认为MyISAM
   #default-storage-engine=MyISAM
   #改为INNODB
   default-storage-engine=INNODB
   #支持 INNODB 引擎模式。修改为　default-storage-engine=INNODB　即可。
   #如果 INNODB 模式如果不能启动，删除data目录下ib开头的日志文件重新启动。

3. 重新导入mydb.sql

1.3.导入mysql另一个问题

如果出现这个问题，说明是mysql没有启动
通过php软件启动mysql
或者cmd命令中执行，net start mysql

1.4.git环境变量配置

参考 —> Windows10下Git环境变量配置
最后一步是重启cmd

1.5.第一次push时，输错密码

删除windows凭据：Win10系统如何删除Windows凭据

1.6.postman不需要注册

1.7.vscode保存代码，直接报错

分析

1. 这是因为默认保存时，自动格式化代码给代码前，添加了一个tab键，而tab键是4个空格，但是eslint语法要求只能是2个空格。
   以及双引号，末尾分号，这些eslint都不允许。
   如果我们一个一个自己修改，太麻烦了。
   我们可以通过一个插件：eslint
   然后在用户设置中增加：（vscode版本：1.19.1测试OK）
   “eslint.autoFixOnSave”: true,
   这样以上问题都可以解决：空格问题，引号问题，末尾分号问题。

2. 补充:
   如果VSCode版本比较高（1.42.1测试OK）,则换成
   “editor.codeActionsOnSave”: {
   “source.fixAll.eslint”: true
   },
   还有一种方式，可以不让代码报错，但是保存代码时不会修复空格引号问题

3. 补充：或者我们可以直接关闭eslint的语法校验
   这样做之后，末尾分号，双引号等等问题，不会再报错。
   保存之后，生成了一个配置：（如果出现了关闭之后，自动打开，就自己添加如下配置

1.8.iconfont 无法正常显示，出现口

这是素材中的资源有兼容问题，我重新下载了，大家找fonts_new.zip
注意：打开demo_index.html，切换Font class，然后按照后续步骤操作

2. 项目

2.1. Cannot read property ‘$createElement’ of undefined

错误如下：不能读取undefined对象的$createElement属性
解决：路由规则component写成了components，注意没有s

由于是通过components指定了/login的组件，所以相当于没指定，那么在路由初始化的时候要调用/login对应组件的$createElement属性，所以报错了。没指定，那就是undefined，所以就是不能读取undefined对象的$createElement属性

2.2.git命令无法执行

问题如下：没有一个git仓库，没有.git文件夹
问题分析：

1. 通过脚手架创建的项目，已经默认勾选了git初始化，所以默认在项目根目录会有一个.git文件夹，有了这个文件夹就说明我们的项目已经被git管理起来了
   如果想执行，git相关命令，需要在有.git文件夹的目录下才能执行、
   出现上述问题，可能有两个原因：
   1.创建项目时，没有勾选git初始化
   2.执行git命令时，项目目录进错了
2. 问题解决：
   找到包含.git文件夹的目录，再执行git命令
   或者：在vue_shop目录下执行git init命令，进行git初始化，它会帮助你创建.git文件夹

2.3.this relative module was not found

问题如下：这个相关的模块没有找到

问题分析：
在main.js中没找到iconfont.css，这种问题，一般都是路径问题
问题解决：
在mian.js中确定引入iconfont.css的路径，看是否有误

2.4.代码切换分支合并分支时被删除

问题描述: 当我们切换master分支之后，发现login分支的代码消失
问题分析：

login分支，创建login.html
当切换到master的时候，login.html消失（这是因为master本来就没有这个文件，肯定会消失）
但是，在merge login之后，login.html就回来了
如果想回退版本：
git log（查看想要回退的版本号）
git reset --hard 版本号
git reset --hard f31cf29afe79a6374e12183541994624221a0e1d 902b8494192a9bc8c3947e39c8494ee6d3878ec8

2.5. POST http://localhost:8080/login 404 （Not Found）其他问题雷同

问题描述:
问题分析：
发送的接口请求地址错了
解决问题：
检查两个地方：
A）main.js中配置请求的根路径是否出错，包括单词大小写：
axios.defaults.baseURL = ‘http://127.0.0.1:8888/api/private/v1/’
B）Login.vue中发送的请求接口地址是否写错：
const {data:res} = await this.$http.post(“login”, this.loginForm);

2.6.Element-ui表单总结

2.6.1.表单数据双向绑定

在这里进行双向数据绑定的时候，我们是将要绑定的data属性放到了loginForm对象中，然后再进行的绑定，这样做方便后续数据的提交，等到提交数据的时候，直接将loginForm对象提交到后台即可

2.6.2.表单校验规则

loginFormRules是一个对象，在对象中可以指定多个字段的校验规则
username是其中一个校验规则，而这个校验规则是有必填和长度这两个校验规则组成的
每一个校验规则都是一个对象，对象中有三项信息
1.校验规则：required必填，min-max长度
2.校验失败时的提示信息：message
3.何时触发校验：trigger（触发器）：blur（失去焦点），意味失去焦点触发此校验规则

2.6.3.表单提交

• 失去焦点需要校验表单，但是最后表单提交的时候，也需要再次校验表单
  • 因为程序员可以通过程序，让表单数据自动填充，所以界面的失去焦点方法校验表单并不完全可靠
  • 其实最后表单提交的时候再次校验，程序员也是可以跳过的，比如通过postman发起请求，不通过界面发起请求，所以前端所有的校验都不靠谱，后端servlet收到数据之后，也还是会重新校验的
• 注意：这里的validate是el-form的方法，我们需要获取el-form对象之后才能调用，如何获取呢？因为Vue不再通过原始方式获取DOM元素对象，所以采用ref引用名的方式：
  1. 只要标签添加ref属性，就会给当前标签创建对象，并且将对象存储到$refs中
  2. vue实例有一个属性 $refs , 存储当前界面中所有带有ref属性的标签的对象
  3. 比如此界面中有俩标签添加有ref：
     (1)
  4. 那么$refs对象就长这样： {“loginForm”:el-form,“item1”:el-form-item}
  5. 所以可以通过如下方式获取：
     (1)this.$refs.loginFormthis.$refs.item1
     (2)this.$refs["loginForm"]this.$refs[“item1”]（这个$refs比较特殊，可以通过中括号方式获取属性）
• validate方法的参数是一个回调函数，函数的参数是校验结果
  • 校验通过，valid=true
  • 校验失败，valid=false
• 最后需要注意，validate方法内部用到了el-form的model属性，所以如果没有写如下属性：
• 会报错：
  model是校验工作必须的属性

2.6.4.表单数据重置

el-form还有一个方法resetFields，重置字段，会将用户输入的信息以及校验信息都清空 。

3.

3.1. TypeError: cannt read property ‘cancelToken’ of undefined

问题描述：
问题分析：
在main.js的拦截器中没有return返回值
解决问题：
在main.js的拦截器中return config,固定写法

3.2.bug调试-network

如果写完代码没有出现你想要的效果，排错步骤如下：
1.右键，查看console，如果有错误，其实是好事，因为最起码有错误提示
2.仔细查看错误，在此文档中查找看有没有类似的错误，如果有按照笔记解决
3.如果没有，那么就将错误翻译成中文，尝试理解错误是什么意思
4.实在不行，将错误放入百度，进行搜索
5. 3-5分钟搞不定的，立马问老师，经过老师的调试，错误搞定之后，一定要将错误收录到此文档中，积累错误文档，是一件非常重要的事情，这些错误就是你的经验
6.如果console里没有错误，那么我们就需要查看network，看一下请求是否有问题
7. 比如，用户列表
8. 先看General
注意会发现有两个users请求，看第二个
查看Request URL，Request Method，Status Code是否有问题
9. 查看请求参数，是否有问题
10. 查看响应数据