Запретить связывание указанных c. vue компонентов - PullRequest
Новая
       20

Запретить связывание указанных c. vue компонентов

2 голосов
/ 02 апреля 2020

Проблема : в моем приложении vue-cli 4 мне бы хотелось иметь скрипт build:, который генерирует рабочий комплект, с указанием c .vue-components, в некоторых случаях не включенным. В других случаях они должны быть включены. Кроме того, эти компоненты хранятся в самом приложении, а не во внешней библиотеке.

Я пытался : динамически импортировать .vue-components - скажем, у меня есть массив: 

const customPreset = ['WidgetFirst', 'WidgetSecond', ...]

И пустой объект: 

const widgets = {}

Итак, я попытался сделать что-то вроде этого: 

customPreset.forEach(v => { Object.assign(widgets, { [v]: () => import('./' + v + '.vue') }) })
export default widgets

Изменение customPreset на другой массив позволит импортировать другой набор компонентов ...

Но это не работает, потому что import() не может работать с выражениями.

Итак, что можно сделать, чтобы включить различные .vue-components в рабочий комплект? в разных случаях? Может быть, это может быть достигнуто путем настройки vue.config.js?

1 Ответ

0 голосов
/ 02 апреля 2020

То, что вы ищете, это lazy loaded components. В Vue они доступны в нескольких точках.

  1. В vue -router - вы можете импортировать компоненты по маршруту, загружать только тогда, когда они необходимы:

Это Вот как определить асинхронный c компонент, который будет автоматически разделяться по кодам через веб-пакет: 

const Foo = () => import('./Foo.vue')

Вы также можете группировать компоненты в одном блоке : 

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
Второй параметр: Динамический / Асин c Компоненты , который можно использовать в vue файлах, таких как: 
Vue.component(
  'async-webpack-example',
  // The `import` function returns a Promise.
  () => import('./my-async-component')
)

Он даже поддерживает состояние загрузки прямо из коробки: 

const AsyncComponent = () => ({
  // The component to load (should be a Promise)
  component: import('./MyComponent.vue'),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})
...