ssr服务器 .json文件,vuessr 服务器端渲染

安装

npm install vue vue-server-renderer --save

构建配置

服务端

webpack配置

onst merge = require('webpack-merge')

const nodeExternals = require('webpack-node-externals')

const baseConfig = require('./webpack.base.config.js')

const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

module.exports = merge(baseConfig, {

// 将 entry 指向应用程序的 server entry 文件

entry: '/path/to/entry-server.js',

// 这允许 webpack 以 Node 适用方式(Node-appropriate fashion)处理动态导入(dynamic import)，

// 并且还会在编译 Vue 组件时，

// 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。

target: 'node',

// 对 bundle renderer 提供 source map 支持

devtool: 'source-map',

// 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)

output: {

libraryTarget: 'commonjs2'

},

// https://webpack.js.org/configuration/externals/#function

// https://github.com/liady/webpack-node-externals

// 外置化应用程序依赖模块。可以使服务器构建速度更快，

// 并生成较小的 bundle 文件。

externals: nodeExternals({

// 不要外置化 webpack 需要处理的依赖模块。

// 你可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，

// 你还应该将修改 `global`(例如 polyfill)的依赖模块列入白名单

whitelist: /\.css$/

}),

// 这是将服务器的整个输出

// 构建为单个 JSON 文件的插件。

// 默认文件名为 `vue-ssr-server-bundle.json`

plugins: [

new VueSSRServerPlugin()

]

})

server

const { createBundleRenderer } = require('vue-server-renderer')

//引入生成的vue-ssr-server-bundle.json文件

const serverBundle = require('/path/to/vue-ssr-server-bundle.json')

const clientManifest = require('/path/to/vue-ssr-client-manifest.json')

//自动注入

const renderer = createBundleRenderer(serverBundle , {

template,

clientManifest

})

server.get('*', (req, res) => {

const context = { url: req.url }

// 这里无需传入一个应用程序，因为在执行 bundle 时已经自动创建过。

// 现在我们的服务器与应用程序已经解耦！

renderer.renderToString(context, (err, html) => {

// 处理异常……

res.end(html)

})

})

//手动注入 可以使用任意模板 这里使用ejs

const renderer = createBundleRenderer(serverBundle , {

inject:false,

clientManifest

})

const context = { url: req.url }

/*

下面context会暴露出renderStyles()、renderState(options?: Object)、renderScripts()、

renderResourceHints()、getPreloadFiles()这几种方法

*/

const appString=await renderer.renderToString(context)

const html=ejs.render(template,{

appString,

style:context.renderStyles(),

scripts:context.renderScripts()

})

客户端

webpack配置

const webpack = require('webpack')

const merge = require('webpack-merge')

const baseConfig = require('./webpack.base.config.js')

const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

module.exports = merge(baseConfig, {

entry: '/path/to/entry-client.js',

plugins: [

// 此插件在输出目录中

// 生成 `vue-ssr-client-manifest.json`。

new VueSSRClientPlugin()

]

})

源码结构

//app.js

import Vue from 'vue'

import App from './App.vue'

// 导出一个工厂函数，用于创建新的

// 应用程序、router 和 store 实例

export function createApp () {

const app = new Vue({

// 根实例简单的渲染应用程序组件。

render: h => h(App)

})

return { app }

}

//entry-client.js

import { createApp } from './app'

// 客户端特定引导逻辑……

const { app } = createApp()

// 这里假定 App.vue 模板中根元素具有 `id="app"`

app.$mount('#app')

//entry-server.js

import { createApp } from './app'

export default context => {

const { app } = createApp()

return app

}