При использовании nuxt2.3.x для импорта асинхронного компонента произошла ошибка с причиной: SyntaxError: неожиданный идентификатор - PullRequest
Новая
       5

При использовании nuxt2.3.x для импорта асинхронного компонента произошла ошибка с причиной: SyntaxError: неожиданный идентификатор

0 голосов
/ 09 января 2019

Я хочу использовать асинхронный компонент на своей странице, чтобы уменьшить размер файла поставщика. Но когда я запускаю страницу в dev, использую команду 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)
})

Причина: ошибка синтаксиса: неожиданный идентификатор

Мой код такой: 

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

},

Поэтому мне нужна помощь, чтобы сообщить мне, как решить эту проблему.

Кстати, эта проблема возникала только в среде разработчиков, после того как сборка будет отсутствовать.

1 Ответ

0 голосов
/ 09 января 2019

Я решил это. См: 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';
    })()
  }
...
...