【Vue】路由学习中遇到的BUG

目录捏

  • 一、TypeError: Cannot read properties of undefined(reading ' self')
    • 问题描述:
    • 原因分析:
    • 解决方案:
  • 二、error 'XXX' is not defined no-undef
    • 问题描述:
    • 原因分析:
    • 解决方案:
  • 三、Error: Cannot find module 'babel-preset-es2015'
    • 问题描述:
    • 原因分析:
    • 解决方案:
  • 四、Refused to apply style from 'http://localhost:8080/iconfont.css'
    • 问题描述:
    • 原因分析:
    • 解决方案:


最近路由学习中遇到了各式各样的飚红,记录下来供大家参考( 其实是怕下次再错X^X


一、TypeError: Cannot read properties of undefined(reading ’ self’)

问题描述:

无法读取 undefined 的属性

【Vue】路由学习中遇到的BUG_第1张图片


原因分析:

routes配置中不是components而是component( 自动提示害人不浅

【Vue】路由学习中遇到的BUG_第2张图片


解决方案:

将components改为component

【Vue】路由学习中遇到的BUG_第3张图片

【Vue】路由学习中遇到的BUG_第4张图片

【Vue】路由学习中遇到的BUG_第5张图片

二、error ‘XXX’ is not defined no-undef

问题描述:

'XXXXX' 未被定义

【Vue】路由学习中遇到的BUG_第6张图片


原因分析:

组件中的name写成变量形式,而变量不存在

【Vue】路由学习中遇到的BUG_第7张图片

【Vue】路由学习中遇到的BUG_第8张图片


解决方案:

将name中所写变量形式改为字符串形式

【Vue】路由学习中遇到的BUG_第9张图片

【Vue】路由学习中遇到的BUG_第10张图片

【Vue】路由学习中遇到的BUG_第11张图片

三、Error: Cannot find module ‘babel-preset-es2015’

问题描述:

按element-ui官网的步骤进行按需引入后报错:找不到模块'babel-preset-es2015'

【Vue】路由学习中遇到的BUG_第12张图片


原因分析:

不再使用es2015,改成@babel/preset-env,两者是相同的,其作用都是编译es6语法


解决方案:

在babel.config.js中写成

【Vue】路由学习中遇到的BUG_第13张图片

四、Refused to apply style from ‘http://localhost:8080/iconfont.css’

问题描述:

拒绝应用'http://localhost:8080/iconfont.css'的风格,因为它的MIME类型('text/html')不是支持的样式表MIME类型,并且启用了严格的MIME检查

请添加图片描述


原因分析:

引入的reset.css样式中,import引入了css样式:@import "./iconfont.css"

请添加图片描述


解决方案:

把css文件中引入的 @import "./iconfont.css" 注释即可

请添加图片描述

你可能感兴趣的:(Web前端,vue.js,bug,前端)