新版本Vue CLI搭建项目的问题_rules": { "no-console": "on",-优快云博客

本文链接：https://blog.youkuaiyun.com/Beam007/article/details/104061906

本文详细介绍了如何解决前端开发中常见的错误，包括console报错、静态文件读取失败及eslint配置问题。提供了修改package.json中eslint规则的具体方法，帮助开发者有效避免和解决这些问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、console报错

报错：

error: Unexpected console statement (no-console)

解决：
修改package.json中的eslint规则：
在eslintConfig.rules，添加一项: “no-console”:“off”

"eslintConfig": {
 "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended"
  ],
  "rules": {
    "no-console": "off"
  },
  "parserOptions": {
    "parser": "babel-eslint"
  }
},

2、静态文件读取报错

以前版本获取静态文件，static和src同层，按如下格式获取即可：

<img src="/static/logoaaa.png">

而新版本命令搭建的项目，按如上格式根本无法获取图片。只需将static文件夹放到public下，再通过同样的方式获取即可。

3、修改eslint配置

键值对的键被单引号’'包裹时会报错quote-props。
修改package.json中的eslint规则：

rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // es6定义不被改变的量就应该声明为const
    'prefer-const': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 对象变量的键值严格情况下无需使用引号，除非一些特殊的命名
    'quote-props': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
    // 'no-use-before-define': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }

此处注意，创建项目时eslint检查时我选择的保存文件时。
所以说，如果存在代码不符合eslint规则，但是你没有修改那部分代码的文件，是不会有报错提示的。