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

【问题标题】：Compile Laravel Vue components into different js files将 Laravel Vue 组件编译成不同的 js 文件
【发布时间】：2019-10-22 21:17:19
【问题描述】：

我在 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.

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

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

【问题讨论】：

Vue.js unknown custom element的可能重复
我关注了这个问题@thisiskelvin，但它并没有解决我的问题。
嗨，我也面临同样的问题。你找到任何解决方案了吗？如果您找到解决方案，请发布此解决方案。
嗨，就我而言，（我是盲人）在我将<script src="{{ mix('js/dashboard.js') }}"></script> 放在正确的位置后，问题就解决了。在刀片文件中的@section('scripts') ... @endsection 之间。

标签： laravel vue.js laravel-5 vue-component

【解决方案1】：

如果您没有为组件指定任何名称，通常会出现此警告

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

<template>
</template>

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

<style>

</style>

此名称选项不是强制性的，但约定为所有组件的每个组件使用一个名称。

【讨论】：