lara php框架 渲染,基于 Laravel 框架作 Vue.js 的 SSR 服务端渲染 2.0

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

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

1. 安装 Node 环境

这里我用的是 Laradock，所以须要在 php-fpm 中安装 node。

laradock/.env 中添加前端

PHP_FPM_INSTALL_NODE=true

PHP_FPM_NODE_VERSION=12.14.0

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

php-fpm:

build:

args:

- INSTALL_NODE=${PHP_FPM_INSTALL_NODE}

- NODE_VERSION=${PHP_FPM_NODE_VERSION}

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

# 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-fpmnode

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

执行：webpack

composer require spatie/laravel-server-side-rendering

php artisan vendor:publish --provider="Spatie\Ssr\SsrServiceProvider" --tag="config"

在 .env 添加 node_path(能够用 whereis node 查看路径laravel

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:cachegit

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

{{ test }}

data () {

test: this.$store.getters.jsVar.test

},

watch: {

"this.$store.getters.jsVar": function(value) {

this.test = value.test;

}

}

index.blade.php

{!! ssr('assets/js/www/entry-server.js')

->context('jsVar', $jsVar)

->fallback('

->render() !!}

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 打包。