利用webpack4搭建vue服务器端渲染SSR(一)

栏目: JavaScript · 发布时间: 6年前

内容简介：构建服务器端渲染(SSR)我们可以利用按照官网的步骤，执行从这段代码我们应该可以明白
  1. 为什么使用服务器渲染? :point_right:官方解释
  2. 应该对VueSSR指南简单了解:point_right:官方文档
  3. 应该对webpack简单了解:point_right:官方文档
  4. Node.js框架Koa简单了解:point_right:官方文档

正文

构建服务器端渲染(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> ：

利用webpack4搭建vue服务器端渲染SSR(一)

从这段代码我们应该可以明白 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中。如图：

利用webpack4搭建vue服务器端渲染SSR(一)

而服务器端渲染(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'
  }
})
// ...
复制代码
利用webpack4搭建vue服务器端渲染SSR(一)

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

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

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

利用webpack4搭建vue服务器端渲染SSR(一)

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

利用webpack4搭建vue服务器端渲染SSR(一)

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

首先我们建立build文件夹，用于存放webpack相关配置，在vue-cli3之前，vue init 初始化后的项目都是有build文件夹的，可以清楚看到webpack配置。而vue-cli3后，使用webpack4，并将配置隐藏了起来，如果想了解webpack4构建vue单页面应用可以去我的github上查看:point_right: 地址 。我们可以模仿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包下载好，目前所需要到的依赖见下图：

利用webpack4搭建vue服务器端渲染SSR(一)

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

利用webpack4搭建vue服务器端渲染SSR(一)

同理，我们需要编写服务端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 命令来一起执行俩端的配置。

利用webpack4搭建vue服务器端渲染SSR(一)

好了，现在我们可以修改我们的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里面包含页面上所有内容。:clap:

利用webpack4搭建vue服务器端渲染SSR(一)

结束语

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


以上所述就是小编给大家介绍的《利用webpack4搭建vue服务器端渲染SSR(一)》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
后谷歌时代:大数据的衰落及区块链经济的崛起

后谷歌时代:大数据的衰落及区块链经济的崛起

乔治·吉尔德 / 现代出版社 / 2018-9-5 / 68

以大数据和机器智能为基础的谷歌时代（信息互联网时代）是一个令人敬畏的时代。但它即将终结。 《后谷歌时代》一书的作者乔治•吉尔德是一位颇具远见卓识的智者。他在技术和文化领域具有无与伦比的视野和见地。他向读者描述了谷歌所面临信任与安全危机，并勇敢地预测了即将到来的后谷歌时代。 谷歌用其惊人的“搜索和排序”能力吸引了整个世界。功能强大的搜索引擎，看似免费小应用，诸如视频、地图、电子邮箱等，让......一起来看看 《后谷歌时代:大数据的衰落及区块链经济的崛起》 这本书的介绍吧!

码农工具
HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

html转js在线工具
html转js在线工具

html转js在线工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3