如何在Laravel项目中为VueJS 3设置编译器Options.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

在你的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 - 对于 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),
}
}
})
]
})

Answer 2

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

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

Answer 3

vue.js with 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)
}
}
}
})
]
})

---

使用Vue.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

TL;博士

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

import MdLinedivider from "../path/file.vue";
export default {
components: {
MdLinedivider
},
...
}

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

Answer 6

在我的例子中，我有一个名为view的全局组件，但我将其用作View。这就是我收到警告的原因。

Answer 7

这个库处理自定义组件，非常简单： https://github.com/antfu/unplugin-vue-components

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
Components({ /* options */ }),
],
})

Answer 8

就我而言，Vue 3 和 Vite 项目，问题是我将组件定义为数组而不是对象。

import MyComponent from "@/components/common/MyComponent";
//components: [MyComponent] <-- DID NOT work 
components: {MyComponent}

Answer 9

我遇到了同样的问题，我在脚本标签中省略了设置属性。

Answer 10

如果创建两个组件属性

components: {
Field
},

components: {
Test
}

在您的 JS 文件中，您将面临此问题。

Answer 11

添加compilerOptions后您的应用程序是否无法正常工作？ ...阅读下文...

---

您的警告在实现如下内容后可能已清除：

我正在使用 Vuetify，所以我需要添加所有以v-开头的自定义元素

export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => {
return tag.startsWith('v-') 
}
}
}
})
]
})

清除警告是一件好事，但如果您的应用程序不再正常工作，请考虑创建一个vitest.config.ts文件。

这样，Vitest 测试脚本将使用vitest.config.ts中指定的不同配置进行测试，build或dev脚本将使用vite.config.ts中指定的配置。

为此：

将代码从vite.config.ts复制粘贴到vitest.config.ts中，并从vue()插件中删除compilerOptions或template，使vite.config.ts保持原样。

确保正确遵循文档中的配置

这一切都会尽可能好✔️地工作

Answer 12

经过 10 个小时的尝试，事实证明，在我的特定情况下，子组件正在导入父组件- 即使它没有被使用并且只是重构和重新排列代码时遗留下来的。它导入它的简单事实似乎混淆了创建组件的顺序。