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

jgwigjjp  于 2022-11-30  发布在  Vue.js
关注(0)|答案(7)|浏览(510)

我正在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从组件解析中排除。我真的到处寻找解决方案,我只找到了this one,但我的laravel项目中没有vue.config.js可以应用它。我尝试在webpack.mis.js和app.js中这样做,但没有成功。
有人知道吗?

pcrecxhr

pcrecxhr1#

请在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),
        }
      }
    })
  ]
})
ioekq8ef

ioekq8ef2#

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

ui7jx7zq

ui7jx7zq3#

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

dnph8jn4

dnph8jn44#

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)
          }
        }
      }
    })
  ]
})

使用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)
}

see vue3 docs on this topic: https://vuejs.org/api/application.html#app-config-compileroptions

66bbxpm5

66bbxpm55#

TL;DR

Vue想知道开发人员是否使用自定义元素。对于这种情况,您可以使用Vue组件属性。

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

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

之后,您可以使用:HTML中的<md-linedivider /><MdLinedivider />标记。

xxls0lw8

xxls0lw86#

该库处理自定义组件,非常简单:https://github.com/antfu/unplugin-vue-components

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
  ],
})
0pizxfdo

0pizxfdo7#

在我的案例中,Vue 3和Vite项目,问题是我将组件定义为数组而不是对象。

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

相关问题