vue报错及其解决办法

旧城等待， 2022-11-29 05:53 403阅读 0赞

导语：

初学者在学习vue的时候，特别是刚开始使用vue-cli的时候，在开发过程中经常会出现很多的报错，因此感觉人生不值得，今天一篇文章，帮你搞定所有报错，人生是值得的！！！！

# 如果还没办法解决，直接私信我也行，我会第一时间帮忙解决问题的，让我们前端兴旺起来，一起学前端！！ #

## 1，node版本不够 ##

报错：SyntaxError:Block-scoped declarations <let,const,function,class>not yet supported outside strict mode

在使用vue脚手架前，得升级一下node的版本

第一步：首先安装n模块：
    npm install -g n
    第二步：升级node.js到最新稳定版
    n stable
    第三步：n后面也可以跟随版本号比如：
    n v0.10.26
    n 0.10.26

还是不行的话就卸载node，去官网下载一个新版本就行了，安装好了之后，在操作台上输入node -v和npm -v，有输出就已经安装完成了。就可以接着安装vue脚手架了。

## 2，$ is undefined but never used import $ from ‘jquery’ ##

没有安装jquery依赖，安装一下就好了，然后要引入到全局或者对应的页面
    npm install jquery

## 3，routes.foreach is not a function ##

routes非数组报错，把routes改成数组就可了。

## 4，eslint 报错 ##

eslint限制的编码错误，注意分号、空格，根据报错的位置去排查就可以了，
    第一次使用eslint肯定会出现很多很多的报错，经常使用就行了，
    你的代码就会变得非常规范。

## 5，sass，less等css处理器 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]

如果没有使用这些预处理器，那就去把css标签里面的lang=‘sass’或者lang=”less“给删除了就可以了，如果有这些预处理器的使用的要求的话，就要去npm install 这些预处理器。

支持sass支持sass首先需要安装sass-loader和node-sass 另外还需要安装style-loader和css-loader。

npm install -D sass-loader node-sass style-loader css-loader

sass-loader将sass代码编译成css（默认通过node-sass），然后css-loader将编译出来的代码编译成符合CommonJS的代码，最后style-loader将编译后的代码再转为js代码，然后webpack就可以识别，进行后续打包操作，而且webpack进行loader编译的顺序是从下到上的，这样我们在webpack中的配置就很简单了，在module.rules进行配置：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]

**持续更新中**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/fbb16f7d8b754cb985d320a3f8fd218c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/8c6553d2d0ad41028ba02b19feefa14a.png