基于 Laravel 框架做 Vue.js 的 SSR 服务端渲染 2.0
之前做了基于 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
<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 打包。