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

Question

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

URL /register 的注册页面就是这种情况。使用命令php artisan make:auth 获取注册相关文件。场景是：

在web.php，我有：

Auth::routes();

在app.js，我有：

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>

register.blade.php 文件包含以下内容：

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

@section('content')
  
@endsection

Register.vue 留在resources/js/components/ 内部，内容如下：

<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.blade.php 继承 layout.blade.php 并将应该在此处呈现的 Register 组件作为数据发送。

我自己也不知道register.blade.php 将如何将组件Register 作为该行数据中的参数：

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

在查看页面源代码时，我什至没有看到页面中包含app.js 文件。

当然，我每次测试页面之前都会运行npm run dev命令。

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

编辑：

我的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： 在页面中，我看不到 Register 组件中的任何内容。之前忘记提了。

EDIT3： 问题 2： Laravel+VueJs 的组合不是真正意义上的 MPA（多页面应用）吗？

Answer 1

我认为回答您的问题并不容易，所以我将分享我的经验。一开始，我以与您相同的方式实现 Vue.js：

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

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

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

结构类似于：

page1.blade.php

@extends('my.layout')

@push('scripts')
    <script src="asset('page1-app.js')"></script>
@endpush

@section('content')
    <page1-component attr1="{{ $attr1 }}" [...]></page1-component>
@endsection

如你所见，结构有点简单：

• 扩展所需布局以加载所需的 CSS 和额外脚本
• 将您需要的 Vue 实例推入 scripts 堆栈
• 在内容部分调用您需要的组件

但是问题出在 javascript 部分……我使用了现代 javascript 应用程序开发功能的 1/3。每天都有新问题出现...首先 JQuery 没用...然后技术 SEO 部分很难处理...然后 Vuex 存储逻辑被复制并且当用户重新加载页面时无用...在一个非常很快我就意识到这种做法是完全错误的……

好吧，至少对于我正在开发的应用程序。所以恕我直言，并且在许多情况下都是您问题的答案

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

是视情况而定。

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

1. 如果您在每个页面中都包含您的 app.js 文件，但您只需要 1 或 2 个组件，它可能会变得有点繁重。
2. 存在很高的冗余风险。
3. 初始组件状态取决于赋予刀片视图的后端属性...如果出现问题，整个应用程序就会混乱。

如果您面临这些问题，请考虑迁移到完整的 SPA 逻辑...更易于维护，您不必每天都发明解决方法等等。

如果您的应用程序是“企业”解决方案...避免在单个代码库中混合 Laravel 和 Vue...拆分所有内容并将后端和前端作为两个完全独立的实体处理。