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

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

一、

如果是使用IDEA和WebStorm的小伙伴
在项目根目录下找到packjson.json 文件在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>
  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
### 回答1: 这个错误是由于 Vue 模板存在不正确的结束标签导致的。可能是由于标签嵌套不正确或者标签缺失导致的。需要检查模板的标签是否正确闭合,并且嵌套是否正确。如果还是无法解决问题,可以尝试使用 Vue 的模板语法检查工具来帮助定位错误。 ### 回答2: Vue/no-parsing-error 错误是由Vue.js框架的Linter插件引发的。在编写Vue.js代码时,如果您没有遵循Vue.js的语法规则,您可能会遇到该错误。这是因为当Linter插件遇到非法代码时,它会将其标识为错误。 “x-invalid-end-tag” 错误通常表示您在Vue.js组件使用了无效的结束标签。这种错误发生的原因可能是因为您在编写模板时无意输入了不必要的标签,或者缺少了必要的结束标签。例如,您可能会在模板使用类似这样的代码: ``` <template> <div> <p>Some content goes here</p> //缺少结束标签 <img src="image.jpg" /> //缺少结束标签 </div> </template> ``` 在这种情况下,您应该检查并添加缺少的结束标签,以解决该错误。您还可以通过使用IDE或编辑器插件来自动化识别和修复这些错误。 此外,还有其他可能导致Vue.js/no-parsing-error错误的原因,例如使用无效的组件标签,使用无效的属性等等。通常,出现这种错误时,您应该仔细检查代码,尝试找出错误的根本原因,并对其进行纠正,以确保您的Vue.js代码和应用程序能够正常运行。 总之,错误分析与修复需要仔细检查代码,识别问题,了解Vue.js的模板语法规则,并使用合适的工具来帮助您识别和修复错误。当您采取适当的措施来处理Vue.js/no-parsing-error错误时,您可以大大提高应用程序的稳定性和可靠性。 ### 回答3: 这个错误在 Vue.js 的开发比较常见,通常会在模板语法出现。这个错误在语法有一些结尾标签没有正确关闭,导致 Vue.js 被解析器无法识别了这个结尾标签,然后底部会出现一个出错的提示。通常出现这个问题是由于以下两种情况: 第一种情况是在编写模板语法时,可能会出现一些手误或者拼写错误,导致结尾标签没有正确闭合。例如,如果在模板语法使用了单标签,例如 <img> 标签,在最后没有使用“/>”对其进行正确的关闭,就会出现这个问题。 第二种情况是当我们在编写 Vue.js 组件时,如果在这个组件有其他的组件或者 HTML 标签,则需要在这个组件添加“template”标签,然后将这个要渲染的组件放在这个“template”标签进行渲染。如果没有添加这个“template”标签或者没有正确设置,Vue.js 会无法正确识别这个组件,然后就会出现类似“error parsing error: x-invalid-end-tag vue/no-parsing-error”的错误提示。 解决这个问题需要我们仔细检查代码,找到这个结尾标签没有正确闭合的位置,然后按照语法要求正确闭合该标签。如果在 Vue.js 组件使用组件或者标签,需要按照要求添加“template”标签来进行渲染。这样就能够解决这个问题
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值