在Laravel專案中如何為VueJS 3設定compilerOptions.isCustomElement

Question

我正在 Laravel 專案中開發 VueJS 3，我正在使用 JS 文件，該文件為我提供了用於 Markdown 工具列的元素。基本上，它是一組函數，為我提供了應用所選降價選項的按鈕。一切工作正常，但我收到了那些我希望它們消失的控制台錯誤。

它們都與這個類似：

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 中執行此操作，但沒有成功。

有人知道嗎？

Answer 1

對於 Nuxt3，您可以在 nuxt.config.ts 中設定值，如下所示。

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

Answer 2

在您的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),
        }
      }
    })
  ]
})