启动项目报错:
错误原因
ESLint 对语法的要求过于严格导致编译的时候报上图那些错误。
要知道,这并不是代码有异常,而是代码格式有问题,这些错误并不会影响代码的执行结果。
解决方法
很简单,既然是ESLint 语法错误,那就取消ESLint验证规则。
vue脚手架创建工程的时候,不要选择Linter / Formatter选项 ,就不需要解决方法了,选择了就用下面的方法解决吧~
方法一: 通过vue.config.js配置lintOnSave
module.exports = {
// 关闭eslint语法验证
lintOnSave: false,
devServer: {
// 关闭eslint语法验证
//overlay: {
// warning: false,
// errors: false,
// },
},
}
先来看看vue.config.js是个啥,官网给的解释是:
vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。
lintOnSave Type: boolean | 'warning' | 'default' | 'error'
Default: 'default'
是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
如果你想关闭eslint,可以将之设置为false,重启服务
// vue.config.js
module.exports = {
lintOnSave: false
}
设置为 true 或 'warning' 时,eslint-loader 会将 lint 错误输出为编译警告。默认情况下,警告仅仅会被输出到命令行,且不会使得编译失败。
如果你希望让 lint 错误在开发时直接显示在浏览器中,你可以使用 lintOnSave: 'default'。这会强制 eslint-loader 将 lint 错误输出为编译错误,同时也意味着 lint 错误将会导致编译失败。
设置为 error 将会使得 eslint-loader 把 lint 警告也输出为编译错误,这意味着 lint 警告将会导致编译失败。
或者,你也可以通过设置让浏览器 overlay 同时显示警告和错误:
// vue.config.js
module.exports = {
devServer: {
overlay: {
warnings: true,
errors: true
}
}
}
当 lintOnSave 是一个 truthy 的值时,eslint-loader 在开发和生产构建下都会被启用。如果你想要在生产构建时禁用 eslint-loader,你可以用如下配置:
// vue.config.js
module.exports = {
lintOnSave: process.env.NODE_ENV !== 'production'
}
方案二:假设我们已经启用了eslint,找到我们工程目录下的package.json,将‘devDependencies’中的依赖删掉(我的是eslint、eslint-plugin-vue、@vue/cli-plugin-eslint这三个),然后执行npm install,然后重启服务,你会发现.eslintrc.js文件的作用已经失效。同样,如果要启用还得安装上这几个依赖包,显然,并不是那么犀利顺畅。
参考链接:
https://blog.csdn.net/qq407949480/article/details/112802114