在当时也提到过 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
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 打包。