Fatal编程技术网
  • vue.js/
  • Vue.js Laravel Mix Vue，延迟加载组件在使用Vue路由器时以未知自定义元素的形式返回错误

Vue.js Laravel Mix Vue，延迟加载组件在使用Vue路由器时以未知自定义元素的形式返回错误

vue.js

Vue.js Laravel Mix Vue，延迟加载组件在使用Vue路由器时以未知自定义元素的形式返回错误,vue.js,lazy-loading,vue-router,laravel-mix,Vue.js,Lazy Loading,Vue Router,Laravel Mix,我有一个新安装的LaravelMix，我试图在项目中设置延迟加载组件。我已经使用babel插件“syntax dynamic import”进行了正确的设置，因此app.js中的import语句可以正常工作。当我尝试将延迟加载的组件与vue路由器一起使用时，会出现此问题 我的app.js文件如下所示： require('./bootstrap'); import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRo

我有一个新安装的LaravelMix，我试图在项目中设置延迟加载组件。我已经使用babel插件“syntax dynamic import”进行了正确的设置，因此app.js中的import语句可以正常工作。当我尝试将延迟加载的组件与vue路由器一起使用时，会出现此问题

我的app.js文件如下所示：

require('./bootstrap');

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const EC = () => import(/* webpackChunkName: "example-component" */ './components/ExampleComponent.vue');

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: EC }
    ]
});

const app = new Vue({
    router,
    el: '#app'
});

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel</title>

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    <base href="/" />
</head>
<body>
<div id="app">
    <h1>Base title</h1>
    <example-component></example-component>
</div>

<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
我的welcome.blade.php文件如下所示：

require('./bootstrap');

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const EC = () => import(/* webpackChunkName: "example-component" */ './components/ExampleComponent.vue');

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: EC }
    ]
});

const app = new Vue({
    router,
    el: '#app'
});

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel</title>

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    <base href="/" />
</head>
<body>
<div id="app">
    <h1>Base title</h1>
    <example-component></example-component>
</div>

<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
因此，我只是尝试在根路径上着陆并显示示例组件。示例组件包含在welcome.blade.php文件中

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

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

(found in <Root>)
我想我遗漏了一些简单的东西，任何建议都很感谢。

首先，我认为您将路由概念与核心组件vue概念混合在一起

尝试直接在vue应用程序中加载组件

const app = new Vue({
    router,
    el: '#app',
    components: {
        'example-component': () => import('./components/ExampleComponent.vue')
    }
});
组件加载是用

查看文档，了解有关动态组件的更多信息：

@Erubiel-answer确实有效，但它仍然不是我想要的设置。当我尝试使用vue路由器时，我需要通过删除对组件的显式调用并在welcome.blade.php文件中添加标记来更新视图。这意味着我的路线被注入到那个空间。更新区域为：

...
<body>
<div id="app">
    <router-view></router-view>
</div>

<script src="{{ asset('js/app.js') }}"></script>
</body>
...
问题在于Vue中的scss拆分和同时使用mix.scss。当两者同时存在时，Laravel mix会创建一个包含manifest js文件内容的css文件。这绝对是一个错误。社区在网页中提到了一个bug，将在网页5中解决。但是，如果您在Vue中仅使用代码拆分，并将默认的app.scss文件像这样导入到主Vue组件中，则不在范围内，这样其他每个组件都将正确获得样式设置

// resources/js/components/app.vue
<template>
 <!-- Main Vue Component  -->
</template>

<script>
// Main Script
</script>

<style lang="scss">
  @import '~@/sass/app.scss';
</style>
希望这能解决每个人的问题