新手小白在vue学习中常见的报错以及解决方法

372 阅读1分钟

报错场景1.运行代码时终端报错:error:0308010C:digital envelope routines::unsupported

image.png

报错原因:node版本过高

对应解决方案:在package.json中指定代码处加入:set NODE_OPTIONS=--openssl-legacy-provider &&或者把你的node版本降低

image.png

报错场景2.文档中所有首行template首字母爆红且有波浪线

image.png

对应解决方案:在.eslintrc.js的parserOptions中加入requireConfigFile: false

image.png

报错场景3.下载时终端报错:npm ERR! code ERESOLVE

报错原因:npm版本导致的问题

image.png

对应解决方案:在命令后加上--legacy-peer-deps

image.png

报错场景4.没有驼峰式命名的文件首行template首字母爆红且有波浪线

image.png

对应解决方案:在.eslintrc.js的rules中加上"vue/multi-word-component-names":"off"

image.png

报错场景5.运行代码时控制台报错Uncaught TypeError: Cannot read properties of undefined (reading 'install')

image.png

报错原因:vue-router安装的版本错误,例如vue2安装的版本应该是3版本的vue-router

对应解决方案:在package.json中检查一下自己的路由版本,版本过高的话就卸载路由后重新下载一遍正确版本的路由

image.png

卸载路由代码:npm uninstall vue-router

image.png

安装3版本的路由代码:npm install --save vue-router@3

image.png

安装3版本的路由成功后检查:安装成功

image.png

报错场景6.运行代码时控制台报错:404且路径中包含了百分数

f809a2a15de468bd1038f7da0c59bd3.png

报错原因:在写接口时多打了空格

对应解决方案:检查自己的接口,取消掉多余的接口空格