README

此助手允许您使用node js为搜索引擎机器人渲染SPA。

内容

安装
配置
使用
- 方法
- 示例
许可证

安装

要获取Laravel服务器端渲染包的最新版本，只需使用 Composer 引入项目

composer require isakzhanov-r/laravel-ssr

当然，如果您想手动更新依赖项，可以在 composer.json 中的 require 块中手动更新，并运行 composer update

{
    "require": {
        "isakzhanov-r/laravel-ssr": "^1.0"
    }
}

如果您不使用自动发现，请将 ServiceProvider 添加到 config/app.php 中的 providers 数组

IsakzhanovR\Ssr\ServiceProvider::class;

配置

该包配置为使用node，因为它可能已经安装在您的系统上。如果您需要更改配置文件，可以发布它以进行修改（即，接口到特定类）

php artisan vendor:publish --provider="IsakzhanovR\Ssr\ServiceProvider"

配置文件包含两个设置：临时文件默认保存的路径 "storage/app/ssr" 和 node 可执行文件的路径

return [
    'temp_storage' => [
        'disk' => 'local', // filesystem disk
        'path' => 'ssr',   // directory
    ],
    'node_path'    => env('NODE_PATH', ''), // default /usr/bin/node
];

您可以通过运行 which node 命令来检查服务器上node的位置，并将 NODE_PATH 键添加到环境文件中

使用

您将需要两个文件来处理两种情况：服务器和客户端。在 tests 文件夹中有一个服务器脚本的示例

mix
    .js('resources/js/server.js', 'public/js')
    .js('resources/js/client.js', 'public/js');

服务器脚本必须传递给 ssr 函数，而客户端脚本必须手动加载。该包假定您正在使用Laravel Mix，并将为您解析路径。我使用如下

@section('content')
    {!! ssr()
            ->entry('js/server.js')
            ->fallback('<div id="wrapper" class="wrapper"></div>')
            ->setData(compact('titles'))
            ->render()  !!}
@endsection

@section('scripts')
    <script src="{{ mix('js/client.js') }}" defer></script>
@endsection

###方法 entry() 方法接受服务器文件路径 argument.js 的参数，您也可以将文件路径传递给 ssr() 方法

{!! ssr('js/server.js') !!}  ===  {!! ssr()->entry('js/server.js') !!}

fallback() 方法在生产过程中渲染时出现错误时是必需的，此方法将返回客户端应用程序将要挂载的div。

setData() 方法是必需的，用于将数据传输到server.js，它接受一个数组作为参数。

render () 方法从js文件渲染html ###示例示例 index blade

<html>
    <head>
        <title>My server side rendered app</title>
        <script defer src="{{ mix('client.js') }}">
    </head>
    <body>
        {!!
        ssr(mix('server.js'))
        ->setData(compact('news','posts'))
        ->render()
        !!}
    </body>
</html>

示例 app.js

import Vue from 'vue';
import store from './store/index';
import router from './routes/index';
import App from './components/App';

export default new Vue({
    store,
    router,
    render: h => h(App)
});

示例 server.js

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

app.$store.commit('SetNews', {news: news});
app.$store.commit('SetPosts', {posts: posts});

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

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

示例 client.js

import app from './app';
import './../vue-client/plugins/bootstrap';

app.$store.commit('SetNews', {news: news});
app.$store.commit('SetPosts', {posts: posts});

app.$mount('#wrapper');

尝试在 client.js 文件中包含所有可以使用 window 对象的插件和包，因为当渲染服务器文件时，node 将找不到 window 对象 并返回错误。

##许可证此包根据 MIT许可证发布。

isakzhanov-r / laravel-ssr

维护者

详细信息

README

内容

安装

配置

使用