SSR

SSR（Server side rendering）服务器端渲染。

vue.js可以将同一个组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器，最后将静态标记“混合”为客户端上完全交互的应用程序。这种在服务器和客户端都可以运行的代码程序，也叫做“同构”。

为什么要使用服务端渲染？

1：SEO（搜索引擎优化），页面异步获取内容；

2：希望用户更快速地看到完整渲染的页面，从而提高用户体验。

一、编写服务器端渲染的配置文件

首先需要在项目根目录里面找到build文件夹，然后在下面新建一个webpack.config.server.js文件，具体配置代码如下：

const path = require('path')
const ExtractPlugin = require('extract-text-webpack-plugin')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const VueServerPlugin = require('vue-server-renderer/server-plugin')

let config

config = merge(baseConfig, {
  target: 'node',
  entry: path.join(__dirname, '../client/server-entry.js'),
  devtool: 'source-map',
  output: {
    libraryTarget: 'commonjs2',
    filename: 'server-entry.js',
    path: path.join(__dirname, '../server-build')
  },
  externals: Object.keys(require('../package.json').dependencies),
module: {
    rules: [
      {
        test: /\.styl/,
        use: ExtractPlugin.extract({
          fallback: 'vue-style-loader',
          use: [
'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true
              }
            },
'stylus-loader'
          ]
        })
      }
    ]
  },
  plugins: [
new ExtractPlugin('styles.[contentHash:8].css'),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
'process.env.VUE_ENV': '"server"'
    }),
new VueServerPlugin()
  ]
})

module.exports = config

分析：http://www.dalbll.com/Group/Topic/Vue/8825

SSR

推荐阅读