如何在 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>

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

有人有什么想法吗？

Answer 1

Try this in your webpack.mix.js

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

UPDATE 4.8.22 - for Vite projects: 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),
        }
      }
    })
  ]
})

Answer 2

对于 Nuxt3，您可以设置nuxt.config.ts如下所示的值。

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

Answer 3

vue.js 与 vite：

在你的vite.config.js/ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => {
            return tag.startsWith('ion-') // (return true)
          }
        }
      }
    })
  ]
})

使用 aVue.js that includes the runtime compiler (aka "full build")你可以这样做：

在你的main.js/ts

// treat all tags starting with 'ion-' as custom elements
app.config.compilerOptions.isCustomElement = (tag) => {
  return tag.startsWith('ion-') // (return true)
}

请参阅有关此主题的 vue3 文档：https://vuejs.org/api/application.html#app-config-compileroptions

Answer 4

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

Answer 5

长话短说

Vue 喜欢知道开发人员是否使用自定义元素。对于这种情况，您可以使用 Vue compnents 属性。

import MdLinedivider from "../path/file.vue";

export default {
  components: {
    MdLinedivider
  },
  ...
}

然后您可以在 HTML 中使用：<md-linedivider />或标签。<MdLinedivider />