Как исправить vue динамические асинхронные компоненты, не найденные в производстве? - PullRequest
Новая
       37

Как исправить vue динамические асинхронные компоненты, не найденные в производстве?

0 голосов
/ 26 октября 2019

Я динамически импортирую компоненты в nuxt.js, используя их путь и имя файла. Это хорошо работает при разработке, и при первой загрузке веб-сайта, но при работе, когда вы переходите на новую страницу, компоненты не загружаются - ошибка 404.

Редактировать: компоненты видны, ноне реагирует. Итак, они рендерится на стороне сервера, но затем не работают на стороне клиента.

Я подозреваю, что это проблема с веб-пакетом, и я пытался использовать магические комментарии, чтобы сохранить имена файлов, но это ничего не изменило.

У меня есть веб-сайт с пользовательской CMS, поэтому я могу использовать любой компонент непосредственно в своих сообщениях. например, если я думаю, что компонент регистрации будет лучше на полпути вниз по странице, тогда я могу разместить его там.

Я использую последнюю версию node.js, express и nuxt.js.

Приведенный ниже код отлично работает при начальной загрузке, но не при изменении маршрута. 

<template>
  <component :is="comp" />
</template>

<script>

export default {
  name: 'DynamicComponent',
  props: {
    componentName: {
      type: String,
      default: ''
    }
  },
  computed: {
    comp() {
      return () => import(`@/components/dynamic/${this.componentName}`)
    }
  }
}

</script>

Насколько я понимаю, webpack - это код, разбивающий все файлы в папке @ / components / dynamic. Он делает это и дает им все хэшированные имена файлов.

Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 30 октября 2019

Я думаю, что проблема с publicPath опцией конфигурации в веб-пакете. Ваш компонент может ссылаться на неправильный каталог в производственной среде. Измените параметр publicPath в vue.config.js во время производственной сборки, и он должен работать

0 голосов
/ 27 октября 2019

Я думаю, что ваша проблема в том, как вы используете реактивные данные в вычисленном методе.

Если вы используете реактивные данные в вычисленном методе, Vue отслеживает эту взаимосвязь. Таким образом, когда реактивные данные изменяются, вычисленное значение снова вычисляется.

В вашем случае реактивные данные используются не непосредственно в вычисляемом методе, а в анонимной функции внутри него. Таким образом, Vue не может создать отношения.

Попробуйте переписать его как 

computed: {
    comp() {
      const componentName = this.componentName;
      return () => import(`@/components/dynamic/${componentName}`);
    }
  }
...