前端关于seo的我的理解与优化（基于Vue ssr）

时间  2020-04-09
标签 前端 关于 seo 我的 理解 优化 基于 vue ssr 栏目 网站开发 繁體版
原文   原文链接

什么是seo

Search Engine Optimization，搜索引擎优化，这就是seo。（固然不止这些）。可是在这里就是很少说了。javascript

SEO原理

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

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

为何要作seo优化

固然是为了“蜘蛛”能够网到你的内容，这样你的内容才能让更多人知道。固然不是全部网站系统都须要作这个，你像一个公司oa系统，就没有必要去作这个，你就本身用，为何要给别人知道。不过，你若是是卖oa系统的，你能够简简单单作一个预渲染就能够，而后里面配置路由的时候只配置首页路由。html

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

Vue预渲染

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

须要用到的插件

prerender-spa-pluginnode

puppeteerwebpack

webpack配置ios

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配置git

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

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

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

约束

  1. 注意服务端只调用beforeCreat与created两个钩子，因此不能够作相似于在created初始化一个定时器，而后在mounted或者destroyed销毁这个定时器，否则服务器会慢慢的被这些定时器给榨干了（这个是什么意思呢？就是，我在node环境下去跑，他会去执行页面内这两个方法，具体以下图）
  2. 因单线程的机制，在服务器端渲染时，过程当中有相似于单例的操做，那么全部的请求都会共享这个单例的操做，因此应该使用工厂函数来确保每一个请求之间的独立性。
  3. 若有在beforeCreat与created钩子中使用第三方的API，须要确保该类API在node端运行时不会出现错误，好比在created钩子中初始化一个数据请求的操做，这是正常而且及其合理的作法。但若是只单纯的使用XHR去操做，那在node端渲染时就出现问题了，因此应该采起axios这种浏览器端与服务器端都支持的第三方库。
  4. 最重要一点: 切勿在通用代码中使用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

优势：

  1. 在生成的文件名中有哈希时，能够取代 html-webpack-plugin 来注入正确的资源 URL。
  2. 在经过 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 中保留一个标记便可:<!--vue-ssr-outlet-->。 服务器端会在这个标记的位置自动生成一个<div id="app" data-server-rendered="true">，客户端会经过app.$mount('#app')挂载到服务端生成的元素上，并变为响应式的。 注意一下，此处将模板 html 修改成服务端渲染适用的模板了，但项目中的 dev 模式也适用的这个模板，但会由于找不到#app到报错，能够这样处理一下:

  1. 最简单的办法，为dev模式单独创建一个 html 模板。。。（下面会提到）
  2. 为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",
复制代码
  1. 若是提醒没有什么依赖就安装什么依赖
  2. 若是遇到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"));
        }
    }
复制代码

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

nuxt.js框架

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

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

上面若是有哪里说错，请在评论区留言，我会及时作更改，谢谢你们了。。。。。

我的吐槽

最近公司须要用到这个，就去调研了这个，落下了我亲爱的组件库了，我会继续努力更新的（主要是懒，清明三天假，就是睡觉，打机，看动漫）

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程