laravel - 将 Laravel Vue 组件编译成不同的 js 文件
问题描述
我在 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.
看起来该组件表现良好,但是我认为该警告出于某种原因而存在并希望对其进行修复。
我尝试做的事情有意义吗?怎么了?
解决方案
如果您没有为组件指定任何名称,通常会出现此警告
例如,如果您有一个名为的组件,User.vue
那么您的组件应如下所示:
<template>
</template>
<script>
export default {
name: 'User'
}
</script>
<style>
</style>
此名称选项不是强制性的,但约定为所有组件的每个组件使用一个名称。
推荐阅读
- html - CSS 在 DOM 中重复
- python-3.x - 在 Python 中对 BeautifulSoup 使用 FOR 循环和 IF
- python - Python中2个输出之间的输入
- java - 请你能解释一下结果的过程吗
- python - 无法在获取请求中使用 json 参数获得所需的响应
- c# - Crystal Reports - 将提供程序从 OLEDBSQL 更改为 MSOLEDBSQL 以通过代码支持 TLS 1.2
- javascript - html5 javascript canvas无法在没有页面刷新的情况下绘制新项目
- python - 烧瓶上的注册页面
- reactjs - React Router 5 中的 Redirect 成功重定向,但不渲染子组件
- c# - 启动后如何创建命名客户端?