如何修复错误 [Vue 警告]:未知的自定义元素?

Posted

技术标签:

【中文标题】如何修复错误 [Vue 警告]:未知的自定义元素?【英文标题】:How to fix error [Vue warn]: Unknown custom element? 【发布时间】:2021-01-01 21:57:46 【问题描述】:
    帮助修复错误:

[Vue 警告]:未知的自定义元素:<app-page-test> - 你注册了吗 组件正确吗?对于递归组件,请确保 提供“名称”选项。

(在<Root>中找到)

    为什么我在 vue 工具中没有看到这个组件 app-page-test

信息。

我在 laravel 项目的自定义页面中添加了组件。

test.blade.php

@extends('layouts.app')

@push('scripts')
    <script src=" asset('js/base/page/test/app.js') " defer></script>
@endpush

@section('content')
    <div id="pageTest">
        <app-page-test></app-page-test>
    </div>
@endsection

resources/js/base/page/test/app.js

import Vue from 'vue';
import App from './components/main';
import store from './store/index';

Vue.component(
    'app-page-test',
    App
);

new Vue(
    el: '#pageTest',
    store
);

resources/js/base/page/test/components/main.vue

<template>
    <div class="app-page-test">
        <p>test</p>
    </div>
</template>
<script>
export default 
    name: "app-page-test",
    mounted() 
        console.log('Component mounted.')
    

</script>

【问题讨论】:

【参考方案1】:

试试这个方法

import Vue from 'vue';
import App from './components/main';
import store from './store/index';
Vue.component('app-page-test', require('./components/AppPageTest.vue').default);

new Vue(
    el: '#pageTest',
    store, 
);

【讨论】:

好的,谢谢。我删除并重新创建了整个项目。原因一直没有找到,但现在没有错误了。 @d-velop 太好了,所以请务必标记此答案,这样其他人就不会花时间在此感谢 嗯...原因一直没有找到。甚至源代码在新项目中也能正常工作。但是感谢您的帮助。

以上是关于如何修复错误 [Vue 警告]:未知的自定义元素?的主要内容,如果未能解决你的问题,请参考以下文章

[Vue 警告]:未知的自定义元素

Laravel Vuejs [Vue 警告]:未知的自定义元素:<router-link>

[Vue 警告]:未知的自定义元素:<app> - 您是不是正确注册了组件? (在 <Root> 中找到)

Vue.js 组件未知的自定义元素

通过 CDN 加载 Vuetify 时获取“未知自定义元素”

Vuetify 中的未知自定义元素