时间戳

首页 > 解决方案 > 使用 nuxt2.3.x 导入异步组件时遇到错误原因：SyntaxError: Unexpected identifier

vue.js - 使用 nuxt2.3.x 导入异步组件时遇到错误原因：SyntaxError: Unexpected identifier

问题描述

我想在我的页面中使用异步组件来减少供应商文件的大小。但是当我在 dev use 命令中运行页面yarn run dev然后重定向到带有异步组件的页面时，我会遇到错误： 错误消息快照

 ERROR  [Vue warn]: Failed to resolve async component: () => ({                                                  12:20:30
  component: Promise.resolve(/*! import() */).then(__webpack_require__.t.bind(null, /*! jquery */ "jquery", 7)).then($ => $).then($ => Promise.resolve(/*! import() */).then(__webpack_require__.t.bind(null, /*! vue-full-calendar */ "vue-full-calendar", 7))).then(({
    FullCalendar
  }) => FullCalendar)
})

原因：SyntaxError：意外的标识符

我的代码是这样的：

components: {
FullCalendar: () => ({
  component: import(/* webpackPreload: true */ 'jquery')
    .then($ => $)
    .then($ => import(/* webpackPreload: true */ 'vue-full-calendar'))
    .then(({ FullCalendar }) => FullCalendar),
}),

},

所以我需要帮助让我知道如何解决这个问题。

顺便说一句，此问题仅在构建后的开发环境中发生，该问题将丢失。

标签： vue.jswebpacknuxt.js

解决方案

我已经解决了。参考： https ://github.com/nuxt/nuxt.js/blob/dev/examples/dynamic-components/pages/index.vue

我的代码：

HTML

...
<component 
 :is="fullcalendar" 
 :config="config" 
 :events="events" />
...

脚本

...
import { async } from 'q';
...
const components={
    FullCalendar: () => import('jquery')
        .then($ => $)
        .then($ => import('vue-full-calendar'))
        .then(({ FullCalendar }) => FullCalendar)
  }
...
mounted(){
    // load async component
    (async ()=>{
      await components['FullCalendar']();
      this.fullcalendar = 'FullCalendar';
    })()
  }
...

推荐阅读