Laravel VueJS：构建多页应用程序而不诉诸单页应用程序（SPA）方法

我正在尝试构建一个Laravel 5.5+VueJs多页面应用程序。我不想使用SPA（单页应用程序）方法使它看起来像一个多页应用程序

URL

/register

上的注册页面就是这种情况。通过命令

php-artisan-make:auth

我获得了与注册相关的文件。这些场景是：

在

web.php

中，我有：

Auth::routes();

window.Vue = require('vue');
const app = new Vue({
    el: '#app',
    components: {
        Register: require('./components/Register.vue')
    }
});

在

app.js

中，我有：

Auth::routes();

window.Vue = require('vue');
const app = new Vue({
    el: '#app',
    components: {
        Register: require('./components/Register.vue')
    }
});

我的

layout.blade.php

位于

resources/views/

文件夹中，包含以下内容：

    <div id="app">
    
                <?php
                  var_dump($component);
                ?>
                @if (isset($component))
                    <component :is={{ $component }} >
                        @endif
    
                        @yield('content')
    
                        @if (isset($component))
                    </component>
                @endif
   </div>

@extends('layout', ['component' => 'Register'])

@section('content')
  
@endsection

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Register Component mounted.')
        }
    }
</script>

Register.vue

位于

resources/js/components/

中，包含以下内容：

    <div id="app">
    
                <?php
                  var_dump($component);
                ?>
                @if (isset($component))
                    <component :is={{ $component }} >
                        @endif
    
                        @yield('content')
    
                        @if (isset($component))
                    </component>
                @endif
   </div>

@extends('layout', ['component' => 'Register'])

@section('content')
  
@endsection

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Register Component mounted.')
        }
    }
</script>

在查看页面源代码时，我甚至没有看到页面中包含的

app.js

文件。

当然，每次测试页面之前，我都会运行

npm run dev

命令

问题1:上述方法有什么问题？然而，正确的方法应该是什么

编辑：

@extends('layout', ['component' => 'Register'])

我的

webpack.mix.js

有：

let mix = require('laravel-mix');
    mix.js('resources/assets/js/app.js', 'public/js')
        .styles([
    
            'resources/assets/css/style.css'
    
        ], 'public/css/style.css')
    ;

mix.options({
    extractVueStyles: 'public/css/vue-style.css'
});

EDIT2: 在页面中，我没有看到来自

寄存器的内容。我以前忘了提过

EDIT3:
问题2:Laravel+VueJs组合不是真正意义上的MPA（多页应用）组合吗？
我认为回答您的问题并不容易，所以我将分享我的经验。开始时，我采用与您相同的方式实现Vue.js：


多页应用程序
每个页面都有自己的组件
每次用户移动到另一个页面时，可能会加载一个新的js文件

这是一次彻底的失败。一开始我使用的是一个
app.js
文件，但是我为一个表单加载了大量无用的组件。。。当我只需要两个或三个组件时，为什么我必须加载整个应用程序？因此，我不得不创建成吨的
xxx app.js
文件，打破枯燥的原则。这不是最好的。。。但它很有效，而且很容易实现

旁注：我没有使用任何类型的文件分块或其他可能解决此类问题的系统。我在VueJS开发的一开始。可能当时我甚至不知道这是可能的

结构类似于：

page1.blade.php

@extends（'my.layout'））
@推送（'脚本'）
@端推
@节（“内容”）
@端部

正如您所见，结构有点简单：


扩展所需的布局以加载CSS和所需的额外脚本
推入所需的
脚本
堆栈
在内容部分调用所需的组件

但是问题是在javascript部分产生的。。。我使用了现代javascript应用程序开发的1/3功能。每天都有新的问题出现。。。第一个JQuery是无用的。。。然后技术SEO部分很难处理。。。然后，当用户重新加载页面时，Vuex存储逻辑被复制且无用。。。在很短的时间内，我意识到这种方法是完全错误的

嗯，至少对于我正在开发的应用程序来说。所以，在很多情况下，你的问题的答案是什么

上述方法有什么问题？然而，正确的方法应该是什么

是否视情况而定

如果您有一个小的应用程序，易于维护，并且没有复杂的工作流程，那么您的解决方案可以工作。。。你只要记住：

如果在每个页面中都包含
app.js
文件，但只需要1到2个组件，那么它可能会变得有点重
冗余的风险很高
初始组件状态取决于给定给刀片视图的后端属性。。。如果出现问题，整个应用程序就会出错
如果你面对这些问题，就要考虑到一个完整的SPA逻辑。更容易维护，你不必每天发明一个变通方法等等

如果您的应用程序是“企业”解决方案。。。避免在单个代码库中混淆Laravel和Vue。。。拆分所有内容并将后端和前端处理为两个完全独立的实体。
“拆分所有内容并将后端和前端处理为两个完全独立的实体”-如何做到这一点？您对这个问题有什么答案：？我试着去关注SPA，但是问题出现了。“如果你面对这些问题，考虑到一个完整的SPA逻辑”——你想说LaaVel+Vujs组合不是MPA（多页应用程序）的意思吗？真正意义上的术语？在OP.1°中添加了多个
EDIT
s：只需为Laravel创建一个项目，为Vue创建一个项目（例如使用Vue Cli）2°：我将再次检查该问题3°：完全正确