什么是seo

Search Engine Optimization，搜索引擎优化，这就是seo。（当然不止这些）。但是在这里就是不多说了。

SEO原理

其实搜索引擎做的工作是相当复杂的，我们这里简单说一下大致的过程。后续针对SEO如何优化，也会根据这几个点展开描述。

页面抓取：蜘蛛向服务器请求页面，获取页面内容
分析入库：对获取到的内容进行分析，对优质页面进行收录
检索排序：当用户检索关键词时，从收录的页面中按照一定的规则进行排序，并返回给用户结果

为什么要做seo优化

当然是为了“蜘蛛”可以网到你的内容，这样你的内容才能让更多人知道。当然不是所有网站系统都需要做这个，你像一个公司oa系统，就没有必要去做这个，你就自己用，为什么要给别人知道。不过，你如果是卖oa系统的，你可以简简单单做一个预渲染就可以，然后里面配置路由的时候只配置首页路由。

像新闻网站，网购网站这些需要广告流量的系统才需要这些。

Vue预渲染

预渲染用起来其实就是插件的使用很简单

需要用到的插件

prerender-spa-plugin

puppeteer

webpack配置

        new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, '../dist'),
            //需要进行渲染的的页面路由
            routes: ['/', '/aaa'],
            renderer: new Renderer({
                // 触发渲染的时间，用于获取数据后再保存渲染结果
                renderAfterTime: 10000,
                // 是否打开浏览器，false 是打开。可用于 debug 检查渲染结果
                headless: false,
                // 在项目的main.js入口中使用 `document.dispatchEvent(new Event('render-event'))` 
                renderAfterDocumentEvent: 'render-event', // render-event: 声明的方法名 
            })
        })
        })

main.js配置

new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>',
    render: h => h(App),
    mounted() {
        document.dispatchEvent(new Event('render-event'))
    },
})

预渲染是最简单的方案，但是只适用于你页面比较少（路由比较少）的时候，因为当你的页面多了起来，你会发现预渲染会变得缓慢起来。

vue-ssr 服务端渲染（官方）

约束

注意服务端只调用beforeCreat与created两个钩子，所以不可以做类似于在created初始化一个定时器，然后在mounted或者destroyed销毁这个定时器，不然服务器会慢慢的被这些定时器给榨干了（这个是什么意思呢？就是，我在node环境下去跑，他会去执行页面内这两个方法，具体如下图）
因单线程的机制，在服务器端渲染时，过程中有类似于单例的操作，那么所有的请求都会共享这个单例的操作，所以应该使用工厂函数来确保每个请求之间的独立性。
如有在beforeCreat与created钩子中使用第三方的API，需要确保该类API在node端运行时不会出现错误，比如在created钩子中初始化一个数据请求的操作，这是正常并且及其合理的做法。但如果只单纯的使用XHR去操作，那在node端渲染时就出现问题了，所以应该采取axios这种浏览器端与服务器端都支持的第三方库。
最重要一点: 切勿在通用代码中使用document这种只在浏览器端可以运行的API，反过来也不可以使用只在node端可以运行的API。（vue的refs好像是可以获取到，网上说可以通过webpack变量来设置，下面会提到我使用的方法）

准备工作（这里以最基础的vue+webpack项目为例）

初始化项目

vue init webpack vue-ssr-demo
cd vue-ssr-demo
npm install
npm run dev

首先得看看项目能不能启动才能继续下去对吧，要是这里出错的话，那直接掘金搜索vue+webpack怎么初始化项目，应该挺多的

package.json

这里只是贴出来给大家看的

开始

安装依赖和启动项目

npm i -D vue-server-renderer

vue-server-renderer 与 vue 版本需要保持一致匹配

增加一个测试页面

<template>
  <div>
    Just a test page.
    <div>
      <router-link to="/">Home</router-link>
    </div>
    <div><h2>{{mode}}</h2></div>
    <div><span>{{count}}</span></div>
    <div><button @click="count++">+1</button></div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        mode: process.env.VUE_ENV === 'server' ? 'server' : 'client',
        count: 2
      }
    }
  }
</script>

src下的两个新的js文件

在src目录下创建两个js

src
├── entry-client.js # 仅运行于浏览器
└── entry-server.js # 仅运行于服务器

entry.client.js

import { createApp } from './main'
const { app, router } = createApp()
// 因为可能存在异步组件，所以等待router将所有异步组件加载完毕，服务器端配置也需要此操作
router.onReady(() => {
  app.$mount('#app')
})

entry.server.js

// entry-server.js
import { createApp } from './main'
export default context => {
  // 因为有可能会是异步路由钩子函数或组件，所以我们将返回一个 Promise，
  // 以便服务器能够等待所有的内容在渲染前，
  // 就已经准备就绪。
  return new Promise((resolve, reject) => {
    const { app, router } = createApp()
    // 设置服务器端 router 的位置
    router.push(context.url)
    // 等到 router 将可能的异步组件和钩子函数解析完
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      // 匹配不到的路由，执行 reject 函数，并返回 404
      if (!matchedComponents.length) {
        // eslint-disable-next-line
        return reject({ code: 404 })
      }
      // Promise 应该 resolve 应用程序实例，以便它可以渲染
      resolve(app)
    }, reject)
  })
}

修改路由配置

为了避免产生单例的影响，这里主要只为每一个请求都导出一个新的router实例:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
 
Vue.use(Router)
 
export function createRouter () {
  return new Router({
    mode: 'history', // 注意这里也是为history模式
    routes: [
      {
        path: '/',
        name: 'Hello',
        component: HelloWorld
      }, {
        path: '/test',
        name: 'Test',
        component: () => import('@/components/Test') // 异步组件
      }
    ]
  })
}

修改main.js

import Vue from 'vue'
import App from './App'
import { createRouter } from './router'
 
export function createApp () {
  // 创建 router 实例
  const router = new createRouter()
  const app = new Vue({
    // 注入 router 到根 Vue 实例
    router,
    render: h => h(App)
  })
  // 返回 app 和 router
  return { app, router }
}

webpack配置修改

vue-cli初始化的配置文件也有三个：base、dev、prod ，我们依然保留这三个配置文件，只需要增加webpack.server.conf.js即可。

build
├── webpack.base.conf.js    # 基础通用配置
├── webpack.client.conf.js  # 客户端打包配置
└── webpack.server.conf.js  # 服务器端打包配置

webpack.prod.conf.js配置（客户端配置）

修改webpack.base.conf.js的entry入口配置为: ./src/entry-client.js。这样原 dev 配置与 prod 配置都不会受到影响。

服务器端的配置也会引用base配置，但会将entry通过merge覆盖为 server-entry.js。生成客户端构建清单client manifest

优点：

在生成的文件名中有哈希时，可以取代 html-webpack-plugin 来注入正确的资源 URL。
在通过 webpack 的按需代码分割特性渲染 bundle 时，我们可以确保对 chunk 进行最优化的资源预加载/数据预取，并且还可以将所需的异步chunk智能地注入为script标签,以避免客户端的瀑布式请求(waterfall request)，以及改善可交互时间(TTI - time-to-interactive)。

其实很简单，在prod配置中引入一个插件，并配置到plugin中即可:

const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
    // ...
    // ...
    plugins: [
      new webpack.DefinePlugin({
        'process.env': env,
        'process.env.VUE_ENV': '"client"' // 增加process.env.VUE_ENV
      }),
      //...
      // 另外需要将 prod 的HtmlWebpackPlugin 去除，因为我们有了vue-ssr-client-manifest.json之后，服务器端会帮我们做好这个工作。
      // 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'
      // }),
 
      // 此插件在输出目录中
      // 生成 `vue-ssr-client-manifest.json`。
      new VueSSRClientPlugin()
    ]
// ...

webpack.server.conf.js(服务器端的配置)

server的配置有用到新插件运行安装: npm i -D webpack-node-externals

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')
// 去除打包css的配置
baseConfig.module.rules[1].options = ''
//baseConfig.module.rules[1].options = '' // 去除分离css打包的插件（有安装并使用esline的情况）
//baseConfig.module.rules[0].options = '' // 去除分离css打包的插件（没有安装esline的情况）
 
module.exports = merge(baseConfig, {
  // 将 entry 指向应用程序的 server entry 文件
  entry: './src/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$/
  }),
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      'process.env.VUE_ENV': '"server"'
    }),
    // 这是将服务器的整个输出
    // 构建为单个 JSON 文件的插件。
    // 默认文件名为 `vue-ssr-server-bundle.json`
    new VueSSRServerPlugin()
  ]
})

修改打包命令

如果出现cross-env找不到，请安装npm i -D cross-env

"scripts": {
    //...
    "build:client": "node build/build.js",
    "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.conf.js --progress --hide-modules",
    "build": "rimraf dist && npm run build:client && npm run build:server"
}

修改index.html

原来的<div id="app">删掉，只在 body 中保留一个标记即可:。服务器端会在这个标记的位置自动生成一个<div id="app" data-server-rendered="true">，客户端会通过app.$mount('#app')挂载到服务端生成的元素上，并变为响应式的。注意一下，此处将模板 html 修改为服务端渲染适用的模板了，但项目中的 dev 模式也适用的这个模板，但会因为找不到#app到报错，可以这样处理一下:

最简单的办法，为dev模式单独建立一个 html 模板。。。（下面会提到）
为dev模式也集成服务端渲染模式，这样无论生产环境与开发环境共同处于服务端渲染模式下也是相当靠谱的一件事。(官方例子是这样操作的)（这个还不会弄）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue-ssr-demo</title>
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>

运行命令

npm run build

然后在dist目录下可见生成的两个 json 文件: vue-ssr-server-bundle.json与vue-ssr-client-manifest.json。

这两个文件都会应用在 node 端，进行服务器端渲染与注入静态资源文件。

根目录下的server.js（服务端运行的js）

(官方例子使用的express，所以此 demo 将采用koa2来作为服务器端，当然，无论是 koa 与 express 都不重要…)

npm i -S koa

在项目根目录创建server.js，内容如下


const Koa = require('koa')
const app = new Koa()
 
// response
app.use(ctx => {
  ctx.body = 'Hello Koa'
})
 
app.listen(3001)

修改server.js代码

需要安装koa静态资源中间件: npm i -D koa-static

const Koa = require('koa')
const app = new Koa()
const fs = require('fs')
const path = require('path')
const { createBundleRenderer } = require('vue-server-renderer')
 
const resolve = file => path.resolve(__dirname, file)
 
// 生成服务端渲染函数
const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'), {
  // 推荐
  runInNewContext: false,
  // 模板html文件
  template: fs.readFileSync(resolve('./index.html'), 'utf-8'),
  // client manifest
  clientManifest: require('./dist/vue-ssr-client-manifest.json')
})
 
function renderToString (context) {
  return new Promise((resolve, reject) => {
    renderer.renderToString(context, (err, html) => {
      err ? reject(err) : resolve(html)
    })
  })
}
app.use(require('koa-static')(resolve('./dist')))
// response
app.use(async (ctx, next) => {
  try {
    const context = {
      title: '服务端渲染测试', // {{title}}
      url: ctx.url
    }
    // 将服务器端渲染好的html返回给客户端
    ctx.body = await renderToString(context)
 
    // 设置请求头
    ctx.set('Content-Type', 'text/html')
    ctx.set('Server', 'Koa2 server side render')
  } catch (e) {
    // 如果没找到，放过请求，继续运行后面的中间件
    next()
  }
})
 
app.listen(8080)
    .on('listening', () => console.log('服务已启动'))
    .on('error', err => console.log(err))

本地启动

运行启动服务命令:

node server.js

浏览器访问: localhost:8080，截图为服务器渲染成功的页面

部署到服务器

部署到服务器的时候需要将整个文件放上去然后再文件夹内跑npm run build(没有将node_modules放上去的话需要npm install)，然后npm run build之后node server.js

本地怎么去调试代码

首先新建一个htmldev.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id="app"></div>
</body>
</html>

修改一下package.json里面的命令

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

如果提醒没有什么依赖就安装什么依赖
如果遇到webpack版本不兼容的情况就换版本

修改config文件夹下的index.js

修改webpack.dev.conf.js配置

怎么使用去使用document/window对象

网上找了一些答案，但是都没有例子，可能是我打开的方式不对才没有找到，所以就只能按照那些答案的思路去实践。（当然，最好的方法就是不使用这两个对象（手动狗头））

但是在一定要使用的情况下，可以通过webpack的DefinePlugin来定义一个变量进行判断当前运行环境（这个变量在之前的配置文件就有了），下面我们看看

webpack.server.conf.js

    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      'process.env.VUE_ENV': '"server"'
    })

webpack.prod.conf.js

        new webpack.DefinePlugin({
            'process.env': env,
            'process.env.VUE_ENV': '"client"' // 增加process.env.VUE_ENV
        })

我们可以通过process.env.VUE_ENV这个来判断当前运行环境，例如

    mounted() {
        if (process.env.VUE_ENV == "server") {
            console.log("服务端");
        } else {
            console.log("客户端");
            console.log(document.getElementById("ooooo"));
        }
    }

css样式文件的引入

这里我自己试过一次，在main.js文件好像也要进行上面的判断，然后在用require('xxx')去引入，不能直接import，如果有其他方法欢迎留言

vue-ssr部分使用是转载于这里（不过上面是我自己敲了一次，并把遇到的问题提出来和解决,他那边有我没有的，我这里有他没有的，哈哈哈哈）

nuxt.js框架

这个和vue的框架差不多，用过vue脚手架的基本看一下官方文档就可以上手（这里说的是上手，不是熟练使用）

这里推荐直接看掘金一位大神的个人博客

上面如果有哪里说错，请在评论区留言，我会及时做更改，谢谢大家了。。。。。

个人吐槽

最近公司需要用到这个，就去调研了这个，落下了我亲爱的组件库了（不想写了）。都看到这里了，能不能顺便动一下下鼠标，给个赞。

前端关于seo的个人理解与改造优化实战（基于Vue-ssr）