将 Laravel Vue 组件编译成不同的 js 文件

Question

我在Laravel有一个大项目，它有几个前端，具体取决于登录用户。

我还有一个shared目录，不同的前端可以使用通用组件(如表、模态等(。

我想将每个前端编译为不同的 js 文件，因此我只能包含每个用户的相关文件。

到目前为止，我所拥有的：

webpack.mix.js：

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/frontendUser.js', 'public/js')
    .js('resources/js/frontendAdmin.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

在resources/js下，我为每个前端都有一个单独的文件，例如frontendAdmin.js：

require('./bootstrap');
window.Vue = require('vue');
Vue.component(
    'frontend-admin-component',
    require('./components/FrontendAdminComponent.vue').default
);
const app = new Vue({
    el: '#app',
});

当我运行npm run dev字段时，正确编译了字段，我可以从刀片文件中包含它们：

<script src="{{ asset('js/frontendAdmin.js') }}" defer></script>

但是，我在控制台中收到此错误：

[Vue warn]: Unknown custom element: <frontend-admin-component>
 - did you register the component correctly? For recursive components,
 make sure to provide the "name" option.

看起来该组件表现良好，但是我认为由于某种原因存在警告并希望修复它。

我试图做的事情有意义吗？怎么了？

Answer 1

如果未指定组件的任何名称，则通常会发生此警告

例如，如果您有一个名为 User.vue 的组件，则您的组件应如下所示：

<template>
</template>
<script>
export default {
 name: 'User'
}
</script>
<style>
</style>

此名称选项不是必需的，但约定为所有组件的每个组件使用名称。