vue3.x:报错记录清单

最新推荐文章于 2025-03-08 20:27:31 发布

原创最新推荐文章于 2025-03-08 20:27:31 发布 · 545 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

当使用vue/cli-plugin-eslintv7.20.0及以上版本时，由于引入了vue/multi-word-component-names规则，单单词的组件名会导致编译错误。解决方法包括修改组件名为多单词（如大驼峰或小驼峰），关闭eslint的lintOnSave设置，或者在.vue.config.js和.eslintrc.js中关闭或忽略特定的命名规则。

##报错提示

component name “index“ should always be multi-word

在组件命名的时候不够规范，根据官方风格指南，除了根组件（App.vue）外，自定义组件名称应该由多单词组成，防止和html标签冲突。vue-cli创建的项目使用了最新的vue/cli-plugin-eslint插件，在vue/cli-plugin-eslint v7.20.0版本之后就引用了vue/multi-word-component-names规则，所以在编译的时候判定此次错误。

解决方式

1. 修改文件名称
修改组件名为多个单词，使用大驼峰或是小驼峰命名规则。
2. 关闭eslint校验
在根目录下找到vue.config.js文件（如果没有则新建一个），添加下面的代码：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 添加此行代码
  lintOnSave:false
})

3. 关闭命名规则校验
在根目录下找到 .eslintrc.js 文件，同样如果没有则新建一个（注意文件前有个点），添加下面的代码：

    "vue/multi-word-component-names":"off",

示例如下：

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     //  在rules中添加自定义规则
    //  关闭组件命名规则
     "vue/multi-word-component-names":"off",
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

4. 官方建议忽略个别组件名

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     //  在rules中添加自定义规则
    //  添加组件命名忽略规则
    "vue/multi-word-component-names": ["error",{
       //  需要忽略的组件名
       "ignores": ["index"]
    }]
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}