Question

我正在学习Vue，并尝试将其设置为与Laravel一起使用的完整前端，在我的场景中，我已经制作了一个个人博客，用于使用带有Blade引擎的Laravel和Vue的某些组件进行测试，并且看起来工作正常。

我正在尝试进入下一个级别，删除Blade并让Laravel作为API后端，并使用SSR将Vue设置为完整前端，我的意思是我可以调用Vue，使用带有节点或PHPv8的SSR渲染它，我遇到的问题是路由系统，以刀片方式无法保存相同的结果，在刀片上我使用默认布局作为母版，并将其导入每个帖子，页面，博客等...

示例：

资源/视图/布局/master.blade

<!DOCTYPE html>
<html dir="ltr" lang="{{ app()->getLocale() }}">

    <head>
        @include('partials._head')
    </head>

    @if(View::hasSection('body')) {{-- Load Custom Body --}}
        <body @section('body')>
    @else
        <body>
    @endif

        @yield('content')

        @include ('partials._javascripts')

        @section('scripts')
    </body>

</html>

因此，我将每页/每页的动态标题，动态内容，基本的javascript（引导程序，vue，fontawesome等）称为自定义“脚本”。

使用图库：

https://github.com/spatie/laravel-server-side-rendering

我可以使SSR与node或PHPv8一起使用，但是vue-route从未调用所需的页面，我的设置是：

resources / assets / js / app.js

import Vue from 'vue';
import App from './layouts/App';
import axios from 'axios';
import store from './store';
import router from './router';
import navbar from './components/navbar';
import posts from './components/posts';
import sidebar from './components/sidebar';
import footer from './components/footer';
import BlogIndex from './views/blog/BlogIndex';



export default new Vue({
    store,
    router,
    navbar,
    posts,
    sidebar,
    footer,
    BlogIndex,
    render: h => h(App),
});

resources/assets/js/entry-client.js

import app from './app';

app.$mount('#app');

resources/assets/js/entry-server.js

import app from './app';
import renderVueComponentToString from 'vue-server-renderer/basic';

app.$router.push(context.url);

renderVueComponentToString(app, (err, html) => {
    if (err) {
        throw new Error(err);
    }
    dispatch(html);
});

resources / assets / js / router.js

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home';
import BlogIndex from './views/blog/BlogIndex';

Vue.use(VueRouter);

const routes = [
    { path: '/', name: 'home', component: Home },
    { path: '/blog', name: 'blog', component: BlogIndex },
];

export default new VueRouter({
    mode: 'history',
    routes,
});

resources / assets / js / store.js

import Vue from 'vue';
import uniq from 'lodash/uniq';
import Vuex, { Store } from 'vuex';

Vue.use(Vuex);

export default new Store({
    state: {
    },

    getters: {
    },

    mutations: {
    },
});

resources / assets / js / views / blog / BlogIndex.vue

<template>
    <div class="container">
        <navbar></navbar>
        <posts></posts>
        <sidebar></sidebar>
        <footer></footer>
    </div>
</template>



<script>

    export default {
        name: "BlogIndex",
        components: {
        }
    }
</script>

<style scoped>

</style>

app / Http / Controllers / VueSSRController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\File;
use Illuminate\Routing\Route;

class VueSSRController extends Controller
{

    public function __invoke()
    {
        return view('layouts.vue');
    }

}

resources / views / layouts / vue.blade.php

<!DOCTYPE html>
<html dir="ltr" lang="{{ app()->getLocale() }}">

    <head>
        @section('extrajavascripts'){{ asset('js/scripts.min.js') }}@endsection
        @include('partials._head')
    </head>

    @if(View::hasSection('body')) {{-- Load Custom Body --}}
    <body @section('body')>
    @else
    <body>
    @endif

        {{-- Begin of Vue SSR --}}
        {!! ssr('resources/assets/js/server_bundle.min.js')
            // Share the packages with the server script through context
            //->context('packages', $packages)
            // If ssr fails, we need a container to render the app client-side
            ->fallback('<div id="app"></div>')
            ->render() !!}
        {{-- End of Vue SSR --}}

        @include ('partials._javascripts')

        @section('scripts')
        @show

    </body>

</html>

/resources/assets/js/layouts/App.vue

<template>
    <div id ="app">
        {{ message }}
    </div>
</template>

<script>
    export default {
        name: "App",
        data() {
            return {
                message: 'SSR working.'
            }
        }
    }
</script>

<style scoped>

</style>

所以SSR可以正常工作，问题是资源/资产/js/router.js没有加载资源/资产/js/views/blog/BlogIndex.vue，URL/博客有效，但是呈现的组件是始终是/resources/assets/js/layouts/App.vue。

请有人指出我缺少的设置吗？

谢谢你的建议！

Answer 1

您应该将<router-view></router-view>放置在路由器要加载的位置。我认为在您的情况下，它位于App.vue中的{{message}}以下

使用SSR和Laravel在Vue上进行路由

1 个答案: