Vue编译中出现 Parsing error: x-invalid-end-tag vue/no-parsing-error 问题

出现这种问题目前笔者发现的有以下几种可能

一、

如果是使用IDEA和WebStorm的小伙伴
在项目根目录下找到.eslintrc.js 文件在rules下面添加

 "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]

重新启动项目即可

二、

如果是使用VSCode 的小伙伴
需要关闭 VSCode 的代码检查
Vetur 使用了一个特定版本的 eslint-plugin-vue，用于检查代码的 <template> 部分。 Linting 配置基于 eslint-plugin-vue 的基本规则集。
这种 linting 是不可配置的，并且基于 eslint-plugin-vue 的固定版本。 如果要配置模板 linting 规则：

vetur.validation.template: false

安装 Eslint 插件
在你的项目中运行 yarn add -D eslint eslint-plugin-vue 这里取决于你使用的是npm还是yarn
设置规则
参考：
Vetur：VSCode下强大的Vue开发工具
Linting for

配置 eslint 规则

安装

安装的时候要注意看下 npm 的提示信息，我安装的时候一直提示版本不对安装不上，以下是我安装成功了的版本：

		"devDependencies": {
    
    
		    "eslint": "^4.14.0",
		    "eslint-loader": "^2.2.1",
		    "eslint-plugin-vue": "^4.7.1",
		    "vue-eslint-parser": "^2.0.3"
		},

以上版本仅做个参考吧。

配置 .eslintrc.js

		module.exports = {
    
    
		  ...,
		  // 注意，plugins 里别忘了加 vue 选项
		  plugins: [
		  	'html',
		    'vue'	
		  ],
		  rules: {
    
    
		  	...,
		    "quotes": [0, "single"],	// 禁用引号检查	引号类型 `` "" ''
		    "semi": 0,  				// 禁用分号检查	[1, "always"]: 需要分号, [2, "never"]: 不加分号, 0: 禁用此项
		    "vue/html-self-closing": "off",
		    "vue/no-parsing-error": [2, {
    
    
		      "x-invalid-end-tag": true,
		    }],
		    "indent": "off",			// 禁用缩进检查
		  }
		}

报了这个错 Definition for rule ‘vue/no-parsing-error’ was not found，那就是没有在 plugins 里加 vue 选项。

三、这句话翻一下就是说结束标签不可用，无法解析错误

先检查一下代码中的标签是否正确，尤其是使用WebStorm工具的小伙伴先看看这几个标签：input和script  这两个标签有点特殊、属于单边标签，就是说格式签完别写错了。

	<input type="text" />
	
	<script>
	</script>