vue服务端渲染——项目搭建、开发、生产环境的部署、浏览渲染、SEO优化

几个月前，公司要求（服务端渲染）——用vue-ssr做了个服务端渲染，从起搭建、开发、部署、浏览器渲染到优化，希望对有需要的小伙伴有帮助，若是有不足之处，望指出，一起讨论学习。——几个月过去了，公司又提出，不希望用vue，或是react或angular的ssr，希望用express + 引擎模板 做纯的html的服务端渲染，这个我下次分享，有兴趣的小伙伴可以一起交流学习。

一.前提（为什么使用vue-ssr）

• 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
• 更快的内容到达时间，特别是对于缓存的网络情况或运行缓慢的设备

二.使用服务端渲染的权衡 （应注意的情况）

• 开发条件所限。一些浏览器的特定代码，只能在某些生命周期钩子函数中使用（node环境只能使用vue的beforeCreate 与 created 生命周期），例如document的操作可以在mounted生命周期中操作；
• 涉及构建设置与部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序（SPA）不同，服务端渲染应用程序，需要处于 node.js server 运行环境
• 更多的服务端负载。 在Node.js中渲染完整的应用程序，显然会比仅仅提供静态资源的 server 更加大量占用 CPU 资源，因此如果在高流量环境下使用，要准备相应的服务器负载，并采取缓存策略

三.使用vue-cli 2.0 修改配置 搭建 ssr 框架以及开发

1.首先用vue-cli2.0 搭建出你想要的命名项目 例如

vue init webpack vue-ssr-test

· webpack 配置

2.修改vue-loader.conf.js

将extract的值设置为false，因为服务器端渲染会自动将CSS内置。如果使用该extract，则会引入link标签载入CSS，从而导致相同的CSS资源重复加载

-    extract: isProduction
+    extract: false

3.修改webpack.base.conf.js

只需修改entry入门配置即可

- app: './src/main.js'
+ app: './src/entry-client.js'

4.修改webpack.prod.conf.js

包括应用vue-server-renderer、去除HtmlWebpackPlugin、增加client环境变量

...
+ const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
...
    new webpack.DefinePlugin({
      'process.env': env,
+     'process.env.VUE_ENV': '"client"'
    }),
...
-    new HtmlWebpackPlugin({
-      filename: config.build.index,
-      template: 'index.html',
-      inject: true,
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeAttributeQuotes: true
-        // more options:
-        // https://github.com/kangax/html-minifier#options-quick-reference
-      },
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
-    }),
...
+    new VueSSRClientPlugin()
...

5、新增 webpack.server.conf.js

const webpack = require('webpack')
const merge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.conf.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

module.exports = merge(baseConfig, {
  entry: './src/entry-server.js',
  target: 'node',
  devtool: 'source-map',
  output: {
    libraryTarget: 'commonjs2'
  },
  externals: nodeExternals({
    whitelist: /\.css$/
  }),
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      'process.env.VUE_ENV': '"server"'
    }),
    new VueSSRServerPlugin()
  ]
})

·入口配置

在浏览器端渲染中，入口文件是main.js，而到了服务器端渲染，除了基础的main.js，还需要配置entry-client.js和entry-server.js

6.修改main.js

import Vue from 'vue'
import Vuex from 'vuex'
-  import '@/assets/style.css'  //这里删除全局样式，然后直接写在app.vue组件内
import App from './App'
-  import router from './router'
+ import createRouter from './router'
-  import store from './store'
+ import createStore from './store'
import async from './utils/async'
Vue.use(async)
- new Vue({
+ export default function createApp() {
+  const router = createRouter()
+  const store = createStore()
+  const app = new Vue({
-   el: '#app',
    router,
    store,
-   components: { App },
-   template: '<App/>'
+   render: h => h(App)
  })
+　return { app, router, store }
+}

7.新增entry-client.js

后面会介绍到asyncData方法，但是asyncData方法只能用于路由绑定的组件，如果是初始数据则可以直接在entry-client.js中获取

import Vue from 'vue'
import createApp from './main'

Vue.mixin({
  beforeRouteUpdate (to, from, next) {
    const { asyncData } = this.$options
    if (asyncData) {
      asyncData({
        store: this.$store,
        route: to
      }).then(next).catch(next)
    } else {
      next()
    }
  }
})

const { app, router, store } = create