So legen Sie CompilerOptions.isCustomElement für VueJS 3 im Laravel-Projekt fest
P粉739942405
P粉739942405 2024-03-25 17:01:01
0
2
769

Ich entwickle VueJS 3 in einem Laravel-Projekt und verwende eine JS-Datei, die mir Elemente für eine Markdown-Symbolleiste bereitstellt. Im Grunde handelt es sich um eine Reihe von Funktionen, die mir eine Schaltfläche zum Anwenden der ausgewählten Markdown-Option bieten. Alles funktioniert gut, aber ich bekomme die Konsolenfehler, die ich verschwinden lassen möchte.

Sie sind alle so ähnlich:

Failed to resolve component: md-linedivider
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Markdowntoolbar> 
  at <Article onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition enter-active-class="animate__animated animate__fadeInLeft" leave-active-class="animate__animated animate__bounceOutUp" mode="out-in" > 
  at <RouterView> 
  at <App> 
  at <Bodycomponent> 
  at <App>

Das bedeutet, dass md-linedivider-Elemente über CompilerOptions.isCustomElement von der Komponentenauflösung ausgeschlossen werden sollten. Ich habe mich nach einer Lösung umgesehen und nur diese gefunden, aber ich habe keine vue.config.js in meinem Laravel-Projekt, um sie anzuwenden. Ich habe versucht, dies in webpack.mis.js und app.js zu tun, ohne Erfolg.

Weiß es jemand?

P粉739942405
P粉739942405

Antworte allen(2)
P粉019353247

对于 Nuxt3,您可以在 nuxt.config.ts 中设置值,如下所示。

export default defineNuxtConfig({
  vue: {  
    compilerOptions: {
      isCustomElement: (tag) => ['lite-youtube'].includes(tag),
    },
  }
})
P粉529581199

在您的webpack.mix.js中尝试一下

mix.js('resources/assets/js/app.js', 'public/js').vue({
  options: {
    compilerOptions: {
      isCustomElement: (tag) => ['md-linedivider'].includes(tag),
    },
  },
});

更新 4.8.22 - 对于 Vite 项目:vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => ['md-linedivider'].includes(tag),
        }
      }
    })
  ]
})
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage