如何在 Laravel 项目中为 VueJS 3 设置 compilerOptions.isCustomElement

Question

我在 Laravel 项目中使用 VueJS 3，我正在使用一个 JS 文件，它为我提供了用于降价工具栏的元素。基本上它是一组功能，为我提供应用所选降价选项的按钮。一切正常，但我收到了我希望它们消失的控制台错误。

它们都类似于这个：

 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>

这就是说 md-linedivider 元素应该通过 compilerOptions.isCustomElement 从组件解析中排除。我真的到处寻找解决方案，我只找到 了这个， 但我的 laravel 项目中没有 vue.config.js 可以应用它。我尝试在 webpack.mis.js 和 app.js 中执行此操作，但没有成功。

有谁知道吗？

原文由 Mostafa Said 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在你的 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 项目：

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

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => ['md-linedivider'].includes(tag),
        }
      }
    })
  ]
})

原文由 daniel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我在 Vue3 中也遇到过这个错误，在我编写 组件 的代码中：但它必须是 组件。我认为它会在输入错误时发出警告。

原文由 Bora Keçeci 发布，翻译遵循 CC BY-SA 4.0 许可协议