阅读前

  1. 为什么使用服务器渲染? ?官方解释
  2. 应该对VueSSR指南简单了解?官方文档
  3. 应该对webpack简单了解?官方文档
  4. Node.js框架Koa简单了解?官方文档

正文

构建服务器端渲染(SSR)我们可以利用vue-server-renderer 插件更简单的构建SSR。官方的一段代码:

// 第 1 步:创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
  template: `<div>Hello World</div>`
})

// 第 2 步:创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 第 3 步:将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})
复制代码

按照官网的步骤,执行node server.js可以看到控制台打印<div data-server-rendered="true">Hello World</div>

 

image1

 

 

从这段代码我们应该可以明白vue-server-renderer的作用是拿到vue实例并渲染成html结构,但它不仅仅只做着一件事,后面会介绍其他配置参数和配合webpack进行构建。


拿到html结构渲染到页面上是我们接下来要做的事情,这里官方事例用的是express搭建服务器,我这里采用Koa,为什么用Koa?我不会express?。Koa起一个服务非常简单,我们还需要借助Koa-router来做路由的处理。

npm i koa koa-router -S
复制代码

修改server.js

const Vue = require('vue')
const Koa = require('koa')
const Router = require('koa-router')
const renderer = require('vue-server-renderer').createRenderer()

//  第 1 步:创建koa、koa-router 实例
const app = new Koa()
const router = new Router()

// 第 2 步:路由中间件
router.get('*', async (ctx, next) => {
  // 创建Vue实例
  const app = new Vue({
    data: {
      url: ctx.url
    },
    template: `<div>访问的 URL 是: {{ url }}</div>`
  })

  // 有错误返回500,无错误返回html结构
  try {
    const html = await renderer.renderToString(app)
    ctx.status = 200
    ctx.body = `
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `
  } catch (error) {
    console.log(error)
    ctx.status = 500
    ctx.body = 'Internal Server Error'
  }
})

app
  .use(router.routes())
  .use(router.allowedMethods())

// 第 3 步:启动服务,通过http://localhost:3000/访问
app.listen(3000, () => {
  console.log(`server started at localhost:3000`)
})
复制代码

从上段代码我们就可以看出服务器端渲染的基本原理了,其实说白了,无服务器端渲染时,前端打包后的html只是包含head部分,body部分都是通过动态插入到id为#app的dom中。如图:

 

 

 

而服务器端渲染(SSR)就是服务器来提前编译Vue生成HTML返回给web浏览器,这样网络爬虫爬取的内容就是网站上所有可呈现的内容。?


为了可以个性化页面,我们可以把html结构抽成一个模板template,通过双花括号{{}}进行传值,新建index.template.html按照官网编写如下代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 三花括号不进行html转义 -->
    {{{ meta }}}
    <title>{{ title }}</title>
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>
复制代码

server.js需要通过Node模块fs读取模板,作为vue-server-renderer的template参数传入

const renderer = require('vue-server-renderer').createRenderer({
  // 读取传入template参数
  template: require('fs').readFileSync('./index.template.html', 'utf-8')
})

// ...
router.get('*', async (ctx, next) => {
  // title、meta会插入模板中
  const context = {
    title: ctx.url,
    meta: `
	<meta charset="UTF-8">
    <meta name="descript" content="基于webpack、koa搭建的SSR">
  `
  }
  try {
    // 传入context渲染上下文对象
    const html = await renderer.renderToString(app, context)
    ctx.status = 200
    // 传入了template, html结构会插入到<!--vue-ssr-outlet-->
    ctx.body = html
  } catch (error) {
    ctx.status = 500
    ctx.body = 'Internal Server Error'
  }
})
// ...
复制代码

 

 

可以看到我们的标题和meta都被插入啦!???。到这里,我们才实现了最基本的用法,接下来我们终于要使用webpack来构建我们项目。

 


Node.js服务器是一个长期运行的进程、当我们的代码进入该进程时,它将进行一次取值并留存在内存中。这意味着如果创建一个单例对象,它将在每个传入的请求之间共享,所以我们需要为为每个请求创建一个新的根 Vue 实例

不仅vue实例,接下来要用到的vuex、vue-router也是如此。我们利用webpack需要分别对客户端代码和服务器端代码分别打包, 服务器需要「服务器 bundle」然后用于服务器端渲染(SSR),而「客户端 bundle」会发送给浏览器,用于混合静态标记。贴一下官方构建图:

 

 

 

我们可以大致的理解为服务器端、客户端通过俩个入口Server entryClinet entry 获取源代码,再通过webpack打包变成俩个bundlevue-ssr-server-bundle.jsonvue-ssr-client-manifest.json,配合生成完成HTML,而app.js是俩个入口通用的代码部分,其作用是暴露出vue实例。所以我们可以按照官方建议整理文件目录,并按照官方事例代码编写,其中起服务的server.js我们用的是Koa,所以可以先不用改。

 

 

 

生成的俩个bundle其实是作为参数传入到createBundleRenderer()函数中,然后在renderToString变成html结构,与createRenderer不同的是前者是通过bundle参数获取vue组件编译,后者是需要在renderToString时传入vue实例?文档。我们先编写webpack成功生成bundle后,再去编写server.js,这样有利于我们更好的理解和测试。


首先我们建立build文件夹,用于存放webpack相关配置,在vue-cli3之前,vue init 初始化后的项目都是有build文件夹的,可以清楚看到webpack配置。而vue-cli3后,使用webpack4,并将配置隐藏了起来,如果想了解webpack4构建vue单页面应用可以去我的github上查看?地址。我们可以模仿vue-cli,创建通用配置webpack.base.conf.js、客户端配置webpack.client.conf.js、服务端配置webpack.server.conf.js。文件目录为

├── build
│   ├── webpack.base.conf.js   # 基本webpack配置
│   ├── webpack.client.conf.js # 客户端webpack配置
│   └── webpack.server.conf.js # 服务器端webpack配置
├── src
├── index.template.html
└── server.js 
复制代码

webpack.base.conf.js配置主要定义通用的rules,例如vue-loader对.vue文件编译,对js文件babel编译,处理图片、字体等。其基本配置如下:

const path = require('path')
// vue-loader v15版本需要引入此插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

// 用于返回文件相对于根目录的绝对路径
const resolve = dir => path.posix.join(__dirname, '..', dir)

module.exports = {
  // 入口暂定客户端入口,服务端配置需要更改它
  entry: resolve('src/entry-client.js'),
  // 生成文件路径、名字、引入公共路径
  output: {
    path: resolve('dist'),
    filename: '[name].js',
    publicPath: '/'
  },
  resolve: {
    // 对于.js、.vue引入不需要写后缀
    extensions: ['.js', '.vue'],
    // 引入components、assets可以简写,可根据需要自行更改
    alias: {
      'components': resolve('src/components'),
      'assets': resolve('src/assets')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // 配置哪些引入路径按照模块方式查找
          transformAssetUrls: {
            video: ['src', 'poster'],
            source: 'src',
            img: 'src',
            image: 'xlink:href'
          }
        }
      },
      {
        test: /\.js$/, // 利用babel-loader编译js,使用更高的特性,排除npm下载的.vue组件
        loader: 'babel-loader',
        exclude: file => (
          /node_modules/.test(file) &&
          !/\.vue\.js/.test(file)
        )
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/, // 处理图片
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'static/img/[name].[hash:7].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 处理字体
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}
复制代码

webpack.client.conf.js主要是对客户端代码进行打包,它是通过webpack-merge实现对基础配置的合并,其中要实现对css样式的处理,此处我用了stylus,同时要下载对应的stylus-loader来处理。在这里我们先不考虑开发环境,后面会详细介绍开发环境的webpack配置。

const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
// css样式提取单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 服务端渲染用到的插件、默认生成JSON文件(vue-ssr-client-manifest.json)
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

module.exports = merge(baseWebpackConfig, {
  mode: 'production',
  output: {
    // chunkhash是根据内容生成的hash, 易于缓存,
    // 开发环境不需要生成hash,目前先不考虑开发环境,后面详细介绍
    filename: 'static/js/[name].[chunkhash].js',
    chunkFilename: 'static/js/[id].[chunkhash].js'
  },
  module: {
    rules: [
      {
        test: /\.styl(us)?$/,
        // 利用mini-css-extract-plugin提取css, 开发环境也不是必须
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader']
      },
    ]
  },
  devtool: false,
  plugins: [
    // webpack4.0版本以上采用MiniCssExtractPlugin 而不使用extract-text-webpack-plugin
    new MiniCssExtractPlugin({
      filename: 'static/css/[name].[contenthash].css',
      chunkFilename: 'static/css/[name].[contenthash].css'
    }),
    //  当vendor模块不再改变时, 根据模块的相对路径生成一个四位数的hash作为模块id
    new webpack.HashedModuleIdsPlugin(),
    new VueSSRClientPlugin()
  ]
})
复制代码

编写完,我们需要在package.json定义命令来执行webpack打包命令。如果没有该文件,需要通过npm init初始化生成

"scripts": {
  "build:client": "webpack --config build/webpack.client.conf.js", # 打包客户端代码
  "build:server": "webpack --config build/webpack.server.conf.js", # 打包服务端代码
  "start": "node server.js" # 启动服务
}
复制代码

我们现在可以通过npm run build:client执行打包命令,需要注意的是,执行命令之前要把依赖的npm包下载好,目前所需要到的依赖见下图:

 

 

 

当打包命令执行完毕后,我们会发现多了一个dist文件夹,其中除了静态文件以外,生成了用于服务端渲染的JSON文件:vue-ssr-client-manifest.json。

 

 

 

同理,我们需要编写服务端webpack配置,同样打包生成vue-ssr-server-bundle.json。配置代码如下:

const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseWebpackConfig = require('./webpack.base.conf')
const VueServerPlugin = require('vue-server-renderer/server-plugin')

module.exports = merge(baseWebpackConfig, {
  mode: 'production',
  target: 'node',
  devtool: 'source-map',
  entry: path.join(__dirname, '../src/entry-server.js'),
  output: {
    libraryTarget: 'commonjs2',
    filename: 'server-bundle.js',
  },
  // 这里有个坑... 服务端也需要编译样式,但不能使用mini-css-extract-plugin,
  // 因为它会使用document,但服务端并没document,导致打包报错。详情见
  // https://github.com/webpack-contrib/mini-css-extract-plugin/issues/48#issuecomment-375288454
  module: {
    rules: [
      {
        test: /\.styl(us)?$/,
        use: ['css-loader/locals', 'stylus-loader']
      }
    ]
  },
  // 不要外置化 webpack 需要处理的依赖模块
  externals: nodeExternals({
    whitelist: /\.css$/
  }),
  plugins: [
    new webpack.DefinePlugin({
      'process.env.VUE_ENV': '"server"'
    }),
    // 默认文件名为 `vue-ssr-server-bundle.json`
    new VueServerPlugin()
  ]
})

复制代码

我们新建一个build:server命令来运行打包服务器端代码。最后会在dist文件下生成vue-ssr-server-bundle.json,同时我们可以新建build命令来一起执行俩端的配置。

 

 

 


好了,现在我们可以修改我们的server.js来实现整个服务器端渲染流程。我们需要获取俩个JSON文件、html模板作为参数传入createBundleRenderer,vue实例不再需要,context需要url,因为服务端端入口(entry-server.js) 需要获取访问的路径来匹配对应的vue组件。部分改动代码如下:

/* 将createRenderer替换成createBundleRenderer,不同之处在上面提到过... */
const { createBundleRenderer } = require('vue-server-renderer')

// ...

// 获取客户端、服务器端生成的json文件、html模板文件
const serverBundle = require('./dist/vue-ssr-server-bundle.json')
const clientManifest = require('./dist/vue-ssr-client-manifest.json')
const template = require('fs').readFileSync('./index.template.html', 'utf-8')

// 传入 json文件和template, 渲染上下文url需要传入,服务端需要匹配路由
router.get('*', async (ctx, next) => {
  const renderer = createBundleRenderer(serverBundle, {
    runInNewContext: false, // 推荐
    template, // 页面模板
    clientManifest // 客户端构建 manifest
  })

  const context = {
    url: ctx.url,
	// ...
  }

// ...
复制代码

改动后,我们运行npm run start,发现页面已经成功渲染出来,但这时有个问题,加载的资源都失败了,文件存在于dist中,很显然,一定是路径不对导致的。这时我们可以通过koa-send来实现静态资源的发送。我们需要在server.js中加入这行代码:

const send = require('koa-send')
// 引入/static/下的文件都通过koa-send转发到dist文件目录下
router.get('/static/*', async (ctx, next) => {
  await send(ctx, ctx.path, { root: __dirname + '/dist' });
})

复制代码

再重新运行,打开控制台可以看到资源加载成功,并且加载的doc里面包含页面上所有内容。?

 

 

 


结束语

但我们目前还没有涉及到需要异步加载的数据渲染,以及如何在开发中进行编码,缓存路由等问题。在下一篇文章我会带大家先实现开发环境的webpack配置,以及修改server.js,这样,就不需要我们每次都要打包来测试我们代码,为接下来学习数据预取,缓存路由等做好准备。一起加油吧。感谢观看~


作者:lihaozecq
链接:https://juejin.im/post/5bd72cd4f265da0a857ac326
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Logo

前往低代码交流专区

更多推荐