基于 Laravel 框架做 Vue.js 的 SSR 服务端渲染 2.0

最新推荐文章于 2024-05-18 10:07:16 发布

JOY酷酷

最新推荐文章于 2024-05-18 10:07:16 发布

阅读量1k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/baidu_27438681/article/details/104333311

版权

Web前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

之前做了基于 V8Js 的 SSR：基于 Laravel 框架做 Vue.js 的 SSR 服务端渲染 1.0

在当时也提到过 V8Js 最大的缺点就是安装起来比较麻烦，这不，由于 PHP 升级没有找到合适的 V8Js 的安装版本，于是不得不改用新的方式做 SSR。

这次选用的是一个 Laravel ssr 的包：spatie/server-side-rendering，同时也参考了它的一个 Demo.

1. 安装 Node 环境

这里我用的是 Laradock，因此需要在 php-fpm 中安装 node。
laradock/.env 中添加

PHP_FPM_INSTALL_NODE=true
PHP_FPM_NODE_VERSION=12.14.0

laradock/docker-compose.yml 中添加参数

php-fpm:
	build:
		args:
			- INSTALL_NODE=${PHP_FPM_INSTALL_NODE}
			- NODE_VERSION=${PHP_FPM_NODE_VERSION}

在 laradock/php-fpm/DockerFile 中添加：

# Node / NVM:
###########################################################################

# Check if NVM needs to be installed
ARG NODE_VERSION=node
ENV NODE_VERSION ${NODE_VERSION}
ARG INSTALL_NODE=false
ARG INSTALL_NPM_GULP=false
ARG INSTALL_NPM_BOWER=false
ARG INSTALL_NPM_VUE_CLI=false
ARG NPM_REGISTRY
ENV NPM_REGISTRY ${NPM_REGISTRY}
ENV NVM_DIR /home/laradock/.nvm

RUN if [ ${INSTALL_NODE} = true ]; then \
    # Install nvm (A Node Version Manager)
    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash \
        && . $NVM_DIR/nvm.sh \
        && nvm install ${NODE_VERSION} \
        && nvm use ${NODE_VERSION} \
        && nvm alias ${NODE_VERSION} \
        && if [ ${NPM_REGISTRY} ]; then \
        npm config set registry ${NPM_REGISTRY} \
        ;fi \
        && if [ ${INSTALL_NPM_GULP} = true ]; then \
        npm install -g gulp \
        ;fi \
        && if [ ${INSTALL_NPM_BOWER} = true ]; then \
        npm install -g bower \
        ;fi \
        && if [ ${INSTALL_NPM_VUE_CLI} = true ]; then \
        npm install -g @vue/cli \
        ;fi \
;fi

# Wouldn't execute when added to the RUN statement in the above block
# Source NVM when loading bash since ~/.profile isn't loaded on non-login shell
RUN if [ ${INSTALL_NODE} = true ]; then \
    echo "" >> ~/.bashrc && \
    echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.bashrc && \
    echo '[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm' >> ~/.bashrc \
;fi

最后执行：
docker-compose build --no-cache php-fpm

2. 安装 spatie/laravel-server-side-rendering

执行：

composer require spatie/laravel-server-side-rendering
php artisan vendor:publish --provider="Spatie\Ssr\SsrServiceProvider" --tag="config"

在 .env 添加 node_path（可以用 whereis node 查看路径

NODE_PATH=/usr/local/bin/node

修改配置文件 www/config/ssr.php
1) 如果需要在开发环境中也生效的话，需要设置 'enabled' => true
2) 修改默认的 node_path，'node_path' => env('NODE_PATH', '/usr/local/bin/node')
3) 记得执行 php artisan config:cache

3.前端脚本

参考 Demo.
值得一提的是，为了方便后端传递参数，我设置了 jsVar 这个变量。当服务端渲染的时候，会从 context.jsVar 中取值，客户端渲染时会从 window.jsVar 中取值。因此部分代码与 Demo 有所不同。

store.js

import Vue from 'vue';
import Vuex, { Store } from 'vuex';
Vue.use(Vuex);

export default new Store({
    state: {
        jsVar: [],
    },
    getters: {
        jsVar: state => state.jsVar,
    },
    mutations: {
        setJsVar(state, { jsVar }) {
            state.jsVar = jsVar;
        },
    },
});

entry-client.js

import app from './app';
app.$store.commit('setJsVar', { jsVar: window.jsVar });
app.$mount('#app');

entry-server.js

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

app.$router.push(context.url);
app.$store.commit('setJsVar', { jsVar: context.jsVar });

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

views/Home.vue

<template>
    <div>{{ test }}</div>
</template>
<script>
export default {
	data () {
		test: this.$store.getters.jsVar.test
	},
	watch: {
		"this.$store.getters.jsVar": function(value) {
			this.test = value.test;
		}
	}
</script>

index.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <script defer src="{{ mix('assets/js/www/entry-client.js') }}"></script>
    </head>
    <body class="bg-paper font-sans leading-normal text-grey-darkest border-t-4 border-orange-light">
        {!! ssr('assets/js/www/entry-server.js')
            ->context('jsVar', $jsVar)
            ->fallback('<div id="app"></div>')
            ->render() !!}

        <script>
        	window.jsVar = @json($jsVar);
    	</script>
    </body>
</html>

4. 后端代码

Controller.php

$js_vars = [
	'test' => $test,
];
$view = View::make('ssr.index');
$view->with('jsVar', $js_vars);

到这里，执行 npm run prod 就可以看到 ssr 后的效果啦。

注意：
在部署时，如果遇到 failed to open stream: Permission denied 报错，可能是 www/storage/app/ssr 的用户权限问题，需要修改成可以访问的权限。

比较

之前基于 V8Js 做 ssr 时，在编写前端的 vue template 时，总是会因为调用 window 变量而导致的报错（最常见的就是使用 v-if 时）。而在基于 Node 做 ssr 后，不会再出现此类报错。不过 import 引入的 js 文件如果使用了 window 变量还是会报错，目前我的解决方案是在 mounted 中用 require 引入。

由于 spatie/laravel-server-side-rendering 是基于 webpack 做 ssr 的（其中的 laravel-mix 依赖于 webpack），而我们的项目主要是 Gulp 打包（这也是之前选择 V8Js 的主要原因），所以现在不得不将必须 ssr 的页面单独用 webpack 打包。

JOY酷酷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
基于 Laravel 框架做 Vue.js 的 SSR 服务端渲染 2.0

之前做了基于 V8Js 的 SSR：基于 Laravel 框架做 Vue.js 的 SSR 服务端渲染 1.0在当时也提到过 V8Js 最大的缺点就是安装起来比较麻烦，这不，由于 PHP 升级没有找到合适的 V8Js 的安装版本，于是不得不改用新的方式做 SSR。这次选用的是一个 Laravel ssr 的包：spatie/server-side-rendering，同时也参考了它的一个 De...
复制链接

扫一扫