文章来自
带你五步学会Vue-SSR
Vue服务器端渲染
构建一个SSR应用程序
SSR热更新
github项目
Vue-SSR优缺点
- 请求到的首屏页面是服务器渲染好的了，SEO很好
- 但是对服务器的压力很大
安装插件
# 安装 vue-server-renderer
# 安装 lodash.merge
# 安装 webpack-node-externals
# 安装 cross-env
npm install vue-server-renderer lodash.merge webpack-node-externals cross-env --save-dev
# 安装 koa
# 安装 koa-static
npm install koa koa-static --save
改造vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export function createStore() {
return new Vuex.Store({
state: {
test: ''
},
mutations: {
SET_TEST(state, data) {
state.test = data;
}
},
actions: {
test({ commit }，opt) {
// 异步查询
commit('SET_TEST', data);
}
}
});
}
改造vue-route
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export function createRouter() {
return new Router({
mode: 'history', // 注意这里要使用history模式，因为hash不会发送到服务端
routes: []
});
}
改造main.js
import Vue from 'vue';
import App from './App.vue';
import { createRouter } from './router';
import { createStore } from './store';
import './assets/css/style.scss';
import './assets/iconfont/iconfont.css';
Vue.config.productionTip = false;
export function createApp() {
const router = createRouter();
const store = createStore();
const app = new Vue({
router,
store,
render: h => h(App)
});
return { app, router, store };
}
改造所有的vue文件
<template>
<div>{{ test }}</div>
</template>
<script>
export default {
// 这个方法需要主动调用，等于是自定义生命周期函数，而且必须是这个名字
asyncData ({ store, route }) {
return store.dispatch('test', route.params.id)
},
computed: {
// 当asyncData被执行，vuex数据改变，导致computed发生改变
test() {
return this.$store.state.test
}
}
}
</script>
创建entry-client.js
import { createApp } from './main';
// 客户端特定引导逻辑……
const { app, router, store } = createApp();
// 如果有__INITIAL_STATE__变量，则将store的状态用它替换
if (window.__INITIAL_STATE__) {
store.replaceState(window.__INITIAL_STATE__);
}
router.onReady(() => {
// 添加路由钩子函数，用于处理 asyncData方法
router.beforeResolve((to, from, next) => {
const matched = router.getMatchedComponents(to);
const prevMatched = router.getMatchedComponents(from);
// 我们只关心非预渲染的组件
// 所以我们对比它们，找出两个匹配列表的差异组件
let diffed = false;
const activated = matched.filter((c, i) => {
return diffed || (diffed = prevMatched[i] !== c);
});
if (!activated.length) {
return next();
}
Promise.all( activated.map(c => {
// 把所有的vue里的asyncData方法一起执行了
if (c.asyncData) {
return c.asyncData({ store, route: to });
}
})
).then(() => {
next();
}).catch(next);
});
// 将Vue实例挂载到dom中，完成浏览器端应用启动
app.$mount('#app');
});
创建entry-server.js
import { createApp } from './main';
export default context => {
// 因为有可能会是异步路由钩子函数或组件，所以我们将返回一个 Promise
// 以便服务器能够等待所有的内容在渲染前，就已经准备就绪。
return new Promise((resolve, reject) => {
const { app, store, router } = createApp();
// 设置服务器端 router 的位置
router.push(context.url);
// 等到 router 将可能的异步组件和钩子函数解析完
router.onReady(() => {
const matchedComponents = router.getMatchedComponents();
// 匹配不到的路由，执行 reject 函数，并返回 404
if (!matchedComponents.length) {
return reject({ code: 404 });
}
Promise.all( matchedComponents.map(c => {
if (c.asyncData) {
return c.asyncData({ store, route: router.currentRoute});
}
})
).then(() => {
// 当使用 template 时，context.state 将作为 window.__INITIAL_STATE__ 状态，自动嵌入到最终的 HTML 中
context.state = store.state;
// 返回根组件
resolve(app);
})
.catch(reject);
}, reject);
});
};
修改vue.config.js
有些教程是把这个分成三个配置文件，效果也一样
const path = require('path');
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');
const nodeExternals = require('webpack-node-externals'); // 忽略node_modules文件夹中的所有模块
// const merge = require('lodash.merge');
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const TARGET_NODE = process.env.WEBPACK_TARGET === 'node';
const target = TARGET_NODE ? 'server' : 'client'; //根据环境变量来指向入口
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
//基本路径
publicPath: process.env.NODE_ENV !== 'production' ? 'http://127.0.0.1:8080' : './',
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
// productionSourceMap: false,
// 输出文件目录
outputDir: 'dist',
css: {
extract: process.env.NODE_ENV === 'production',
sourceMap: true
//向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
},
configureWebpack: () => ({
// 将 entry 指向应用程序的 server / client 文件
entry: `./src/entry-${target}.js`,
// 需要开启source-map文件映射，因为服务器端在渲染时，
// 会通过Bundle中的map文件映射关系进行文件的查询
devtool: 'source-map',
// 服务器端在Node环境中运行，需要打包为类Node.js环境可用包（使用Node.js require加载chunk）
// 客户端在浏览器中运行，需要打包为类浏览器环境里可用包
target: TARGET_NODE ? 'node' : 'web',
// 关闭对node变量、模块的polyfill
node: TARGET_NODE ? undefined : false,
output: {
// 配置模块的暴露方式，服务器端采用module.exports的方式，客户端采用默认的var变量方式
libraryTarget: TARGET_NODE ? 'commonjs2' : undefined
},
// 外置化应用程序依赖模块。可以使服务器构建速度更快
externals: TARGET_NODE
? nodeExternals({
// 不要外置化 webpack 需要处理的依赖模块。
// 你可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，
// 你还应该将修改 `global`（例如 polyfill）的依赖模块列入白名单
whitelist: [/.css$/]
})
: undefined,
optimization: {
splitChunks: TARGET_NODE ? false : undefined
},
// 根据之前配置的环境变量判断打包为客户端/服务器端Bundle
plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
}),
chainWebpack: config => {
// 关闭vue-loader中默认的服务器端渲染函数
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
// merge(options, {
// optimizeSSR: false
// });
options.optimizeSSR = false;
return options;
});
config.resolve.alias
.set('@src', resolve('src'))
.set('@api', resolve('src/api'))
.set('@assets', resolve('src/assets'))
.set('@comp', resolve('src/components'))
.set('@views', resolve('src/views'));
},
devServer: {
historyApiFallback: true,
headers: { 'Access-Control-Allow-Origin': '*' }
// port: 8088
// proxy: { ... }
// }
},
lintOnSave: false
};
创建index.temp.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ title }}</title>
</head>
<body>
<div id="app">
<!--vue-ssr-outlet-->
</div>
</body>
</html>
修改package.json
// 在原本的dev和build基础上加上
"build:server": "cross-env NODE_ENV=production WEBPACK_TARGET=node vue-cli-service build",
运行npm run build:server会生成两个json
创建service.js
const fs = require("fs");
const Koa = require("koa");
const path = require("path");
const koaStatic = require('koa-static')
const app = new Koa();
const resolve = file => path.resolve(__dirname, file);
// 开放dist目录
app.use(koaStatic(resolve('./dist')))
// 第 2 步：获得一个createBundleRenderer
const template = fs.readFileSync(resolve("./public/index.temp.html"), "utf-8");
const { createBundleRenderer } = require("vue-server-renderer");
const bundle = require("./dist/vue-ssr-server-bundle.json");
const clientManifest = require("./dist/vue-ssr-client-manifest.json");
const renderer = createBundleRenderer(bundle, {
runInNewContext: false,
template: template,
clientManifest: clientManifest
});
function renderToString(context) {
return new Promise((resolve, reject) => {
renderer.renderToString(context, (err, html) => {
err ? reject(err) : resolve(html);
});
});
}
// 第 3 步：添加一个中间件来处理所有请求
app.use(async (ctx, next) => {
const context = {
title: "ssr-test",
};
// 将 context 数据渲染为 HTML
const html = await renderToString(context);
ctx.body = html;
});
const port = 3000;
app.listen(port, function() {
console.log(`server started at localhost:${port}`);
});
修改package.json
// 再加上
"dev:serve": "node server.js",
全部配置完成，先执行打包再启动服务
其他配置
- 服务器路由缓存，加快编译