Search Engine Optimization

Posted on | In , | 0 comments | Visitors:

解决SEO(Search Engine Optimization),首屏问题 , 页面较少，且预渲染相对于SSR比较简单，预渲染可以极大的提高网页访问速度。而且配合一些meat插件，完全可以满足SEO需求。
Prerender服务需要有NodeJs环境支持，如果之前服务器环境没有NodeJs需要先进行安装。

安装

1
npm install --save prerender-spa-plugin

prerender-spa-plugin中有puppeteer
可能会报错

1
2
ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA
D" env variable to skip download.

此时可以试试淘宝镜像安装

1
cnpm install --save prerender-spa-plugin

因为在执行安装的过程中需要执行install.js，这里会下载Chromium,官网建议是进行跳过，我们可以执行 —ignore-scripts 忽略这个js执行。也可以通过设置环境变量set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1阻止下载 Chromium （因为封网，直接下载会失败） 

1
npm i --save puppeteer --ignore-scripts

然后手动下载Chromium
解压到你当前项目中的node_modules/puppeteer/.local-chromium/mac-571375下就可以了

配置

webpack.base.conf.js

1
2
3
4
5
6
7
module.exports = {
  context: path.resolve(__dirname, '../'),
  //entry: {app: './src/main.js'}
  entry: {
    app: ['babel-polyfill','./src/main.js']//babel-polyfill会仿效一个完整的 ES2015+ 环境，并意图运行于一个应用中而不是一个库/工具。
  }
}

webpack.prod.conf.js
开始我这样写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const PrerenderSpaPlugin = require('prerender-spa-plugin')
    new PrerenderSpaPlugin({
        // 生成文件的路径，也可以与webpakc打包的一致。
        // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
         staticDir: path.join(__dirname, '../dist'),
        // List of routes to prerender
        // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
        routes: [ '/', '/team', '/analyst','/voter','/sponsor'],

        // 这个很重要，如果没有配置这段，也不会进行预编译
        renderer: new Renderer({
        renderAfterTime: 5000,
       // eg, with `document.dispatchEvent(new Event('render-event'))`
       // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
     renderAfterDocumentEvent: 'render-event',//这句话会报错building for production...[prerender-spa-plugin] Unable to prerender all routes!
UnhandledPromiseRejectionWarning: Error: waiting for selector "render-event" failed: timeout 30000ms exceeded
   
          // Optional - Wait to render until the specified element is detected using `document.querySelector`
          // renderAfterElementExists: 'render-event',
        })
    }),

结果报错 ：building for production…[prerender-spa-plugin] Unable to prerender all routes! UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Navigation Timeout Exceeded: 30000ms exceededrender AfterTime: 5000
偶然看到一个解决的办法 UnhandledPromiseRejectionWarning

1
2
3
4
5
6
7
8
9
10
const PrerenderSpaPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSpaPlugin.PuppeteerRenderer

new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, '../dist'),
  routes: ['/home/homePage'],
  renderer: new PrerenderSPAPlugin.PuppeteerRenderer({//这样写renderAfterTime生效了
    renderAfterTime: 5000
  })
})

开发目录main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  components: { App },
  template: '<App/>',
  render: h => h(App),
  /* 这句非常重要，否则预渲染将不会启动 */
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

就可以在dist文件夹下生成对应路由的文件夹里面包含页面预渲染信息的html

1
2
3
4
5
6
7
8
9
10
//比如PrerenderSPAPlugin中的 routes: [ '/','/home/homePage']
就会生成下面这样的路径
 ``` bash
dist
│    ├── home          
│    │       └── index.html           
│    ├── homePage
│             └── index.html 
├── index.html      
└── static

结合管理头部标签插件vue-meta-info
main.js中加

1
2
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

页面的vue中加metaInfo信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default {
  metaInfo: {
    title: 'We Inc',
    meta: [
      {
        name: 'keywords',
        content: '关键字1,关键字2,关键字3'
      },
      {
        name: 'description',
        content: '这是一段网页的描述'
      }
    ]
  }
}

就可以将关键字预渲染到html的页面中去

渲染结束遇到的问题

一、Uncaught ReferenceError: webpackJsonp is not defined
发现是config/index.js

1
assetsPublicPath: '/', //路径是/不是./

这里要强调一点如果你的assetsPublicPath设置成’www.xxx.com'，生成的html是没有内容的而且插件vue-meta-info的设置的信息也不会加载出来
生成html图片.png
如果是/找到js文件的话，生成这种带你写的结构的html
image.png
image.png

二、解决vuex requires a Promise polyfill in this browser问题
添加babel-polyfill插件
webpack.base.conf.js

1
2
3
4
5
6
7
module.exports = {
  context: path.resolve(__dirname, '../'),
  //entry: {app: './src/main.js'}
  entry: {
    app: ['babel-polyfill','./src/main.js']//babel-polyfill会仿效一个完整的 ES2015+ 环境，并意图运行于一个应用中而不是一个库/工具。
  }
}