Vue.js 3模板-文字错误无法读取null的属性“范围" [英] Vue.js 3 template- literals error Cannot read property 'range' of null
本文介绍了Vue.js 3模板-文字错误无法读取null的属性“范围"的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在Vue.js中动态导入异步组件.
I'm trying to dynamically import an async component in Vue.js.
<template>
<MyAsync></MyAsync>
</template>
<script>
import { defineAsyncComponent } from 'vue';
const component = 'lorem-ipsum-4';
export default {
name: 'Article',
components: {
MyAsync: defineAsyncComponent(() => import(`@/articles/${component}.vue`)),
},
};
</script>
但是这不起作用,并产生以下错误.
This however does not work and produces the following error.
Failed to compile.
./src/views/Article.vue
Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'range' of null
Occurred while linting /project/src/views/Article.vue:13
at SourceCode.getTokenBefore (/project/node_modules/eslint/lib/source-code/token-store/index.js:298:18)
at checkSpacingBefore (/project/node_modules/eslint/lib/rules/template-curly-spacing.js:60:42)
at TemplateElement (/project/node_modules/eslint/lib/rules/template-curly-spacing.js:119:17)
at /project/node_modules/eslint/lib/linter/safe-emitter.js:45:58
at Array.forEach (<anonymous>)
at Object.emit (/project/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
at NodeEventGenerator.applySelector (/project/node_modules/eslint/lib/linter/node-event-generator.js:254:26)
at NodeEventGenerator.applySelectors (/project/node_modules/eslint/lib/linter/node-event-generator.js:283:22)
at NodeEventGenerator.enterNode (/project/node_modules/eslint/lib/linter/node-event-generator.js:297:14)
at CodePathAnalyzer.enterNode (/project/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:634:23)
at /project/node_modules/eslint/lib/linter/linter.js:936:32
at Array.forEach (<anonymous>)
at runRules (/project/node_modules/eslint/lib/linter/linter.js:931:15)
at Linter._verifyWithoutProcessors (/project/node_modules/eslint/lib/linter/linter.js:1157:31)
at /project/node_modules/eslint/lib/linter/linter.js:1281:29
at Array.map (<anonymous>)
不过,静态导入效果很好:
Static import however works just fine:
<template>
<MyAsync></MyAsync>
</template>
<script>
import { defineAsyncComponent } from 'vue';
export default {
name: 'Article',
components: {
MyAsync: defineAsyncComponent(() => import('@/articles/lorem-ipsum-4.vue')),
},
};
</script>
这是使用Vue CLI创建的Vue.js v3项目.
This is a Vue.js v3 project created using Vue CLI.
可以在 github
是否可以进行动态导入?
推荐答案
After some debugging I found that it's an eslint issue template-curly-spacing, to solve it I added the file .eslintrc
to the project root with following content :
{
"plugins": [
"vue"
],
"rules" : {
"template-curly-spacing": ["error", "never"]
}
}
这篇关于Vue.js 3模板-文字错误无法读取null的属性“范围"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文