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

时间:2019-06-07 11:00:47

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

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

看起来组件运行良好,但是我认为该警告由于某种原因而存在,并希望对其进行修复。

我想做的事有意义吗?怎么了?

1 个答案:

答案 0 :(得分:0)

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

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

<template>
</template>

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

<style>

</style>

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