Vue.js 3 模板-文字错误无法读取 null 的属性“范围”

问题描述

我正在尝试在 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>

然而这不起作用并产生以下错误。

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>)

静态导入但是工作正常：

<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 项目。

可以在 github

找到一个（相当少的）示例

有没有办法让动态导入工作？

解决方法

export default {
  name: 'Article',components: {
    MyAsync: defineAsyncComponent(() => import('@/articles/'+ component +'.vue')),},};

但是，我不认为这很好。

,

经过一些调试，我发现它是一个 eslint issue template-curly-spacing，为了解决它，我将文件 import datetime Date_0 = [datetime.date(2021,3,10),datetime.date(2021,11)] Date_1 = datetime.date(2021,12) Date_combine = [Date_0,Date_1] 添加到项目根目录中，内容如下：

.eslintrc

,

在包含 @ 的路径上替换 ./

export default {
  name: 'Article',components: {
    MyAsync: defineAsyncComponent(() => import(`./articles/${component}.vue`)),};

它对我有用