Блог

Я пытаюсь реализовать свой проект трафарета в приложении Ionic Vue и полностью вырываю волосы. Проблема заключается в следующем:

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

Чтобы решить эту проблему, мы должны сообщить экземпляру Vue, что компоненты с определенным префиксом НЕ являются компонентами Vue. Чтобы достичь этого, в документах по трафарету по интеграции фреймворка с Vue мне было сказано, что я должен изменить настройку конфигурации в своем экземпляре Vue с помощью: Vue.config.ignoredElements = [/gc-w*/]; . Это здорово, если вы используете Vue 2, но приложения Ionic Vue используют Vue 3.

Согласно документам Vue 3, вы можете сделать что-то подобное в версии 3, только для этого вам нужно использовать compilerOptions экземпляр Vue: app.config.compilerOptions.isCustomElement = tag => /gc-w*/.test(tag)

Однако, когда я пробую это решение, Vue начинает жаловаться, что вы можете настроить параметры компилятора таким образом только при использовании полной сборки Vue. Когда вы используете сборку только во время выполнения (которую, по-видимому, использует Ionic?) вы должны изменить любые настройки во время выполнения.

После многих разочарований и поисков в Гугле я, наконец, понял, как изменить параметры компилятора во время выполнения. Я создал vue.config.js , и он содержит следующее:

 module.exports = {
  configureWebpack: {
    resolve: { symlinks: false }
  },
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...(options.compilerOptions || {}),
          isCustomElement: tag => /gc-w*/.test(tag)
        };
        return options;
      });
   },
}
 

Это дало мне следующую ошибку при попытке запустить службу yarn: Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined .

After much Googling, I FINALLY managed to resolve that issue by installing vue-loader@next . Now I could run yarn serve and work on my Ionic app.

However, once I started using the Vue 3 Composition API I ran into problems again. I keep getting errors like: Module '"../../node_modules/vue/dist/vue"' has no exported member 'toRefs'. .

Похоже, это как-то связано с версией Vue vue-loader@next , которая хочет иметь одноранговую зависимость. Потому что, когда я удаляю его, он возвращается к Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined ошибке.

Что я здесь делаю не так? Разве это не правильный способ реализации компонентов трафарета в проекте Ionic Vue? Мне кажется, что я бегаю здесь по кругу. Любая помощь будет очень признательна!