使用iView时报"Parsing error: x-invalid-end-tag"错误的解决方案

最新推荐文章于 2025-08-25 19:29:02 发布

原创最新推荐文章于 2025-08-25 19:29:02 发布 · 3.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#x-invalid-end-tag #iview

前端专栏收录该内容

183 篇文章

订阅专栏

本文解决使用Vue和iView时遇到的栅格布局解析错误问题，通过修改.eslintrc.js文件或VSCode配置，避免自闭合标签的结束标签导致的错误。

使用iview和vue的时候，想用iview的栅格布局，结果报错了

<Col span="6">
    <div>col-6</div>
</Col>

vue Parsing error: x-invalid-end-tag

原因

vue将标签渲染为原生html标签时，由于这些标签是自闭合的，所以有end标签会报错。

解决

1.修改`.eslintrc.js`文件

注意，如果你在生成配置文件的时候，选择了都保存在package.json中，这时候是没有这个文件的，eslint的配置文件应该在package.json中

在rules中添加一行规则"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],
    "rules": {
      "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

之后重新生成

2.如果上述不好使，那就在vscode中修改配置

快捷键ctrl+p，然后用户设置
修改"vetur.validation.template": true,为false

参考

iview–issue：https://github.com/iview/iview/issues/2828
linting-error：https://github.com/vuejs/vetur/blob/master/docs/linting-error.md#linting-for-template