在 vue项目中进行seo优化（页面的预渲染）

项目打包时有时候需要进行页面的seo的优化

现在主要的优化有两种

1、ssr服务器优化（在这不做过多的解释  具体vue官网上的解释 https://cn.vuejs.org/v2/guide/ssr.html）

2、我们在这主要讨论的时页面的预渲染

目标：对页面进行预渲染从而达到seo优化

实现步骤：

1、安装prerender-spa-plugin 插件

 

npm install prerender-spa-plugin --save 

2、然后在webpack.prod.conf.js里面添加：

// 头部引入
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

3、在plugins里面添加：

new PrerenderSPAPlugin({
  // 生成文件的路径，也可以与webpakc打包的一致。
  // 下面这句话非常重要！！！
  // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
  staticDir: path.join(__dirname, '../dist'),

  // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
  routes: ['/index', '/concat'],

  // 预渲染代理接口
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:9018',
        secure: false
      }
    }
  },

  // 这个很重要，如果没有配置这段，也不会进行预编译
  renderer: new Renderer({
    inject: {
      foo: 'bar'
    },
    headless: false,
    // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
    renderAfterDocumentEvent: 'render-event'
  })
}),

4、最后在main.js里面修改：

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  // 添加mounted，不然不会执行预编译
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

在这需要注意的是：红框标注的位置命名必须保持一致。

 

然后npm run build（在运行过程中页面会自动的快速的打开并关闭，这是正常现象）

在dist文件夹下出现你预先设置的文件的文件夹且打开文件里面就是你要的内容就说明成功了

 

在webpack配置时可能存在的问题如下：

 

 

注意：

我在这大概总结一下下载prerender-spa-plugin插件可能遇到的问题:

1、prerender-spa-plugin中有puppeteer可能会报错，可以试试装淘宝镜像

cnpm install --save prerender-spa-plugin

在下prerender-spa-plugin插件会自动下载puppeteer，

Puppeteer 至少需要 Node v6.4.0，如要使用 async / await，只有 Node v7.6.0 或更高版本才支持。 node下载地址： https://nodejs.org/zh-cn/

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

或者执行下面的语句将其忽略：

npm i --save puppeteer --ignore-scripts

然后在npm install puppeteer

忽略以后你发现安装成功了，在这时一定要记得下载Chromium（如果可以翻墙最好翻墙下载，如果不可以找找gitHub上大佬更新的Chromium）

将下载好的Chromium 放在/path/to/project/node_modules/puppeteer/.local-chromium/目录下

然后在执行 那npm run build 

 

还有在这还需要说的一点是:有的时候依赖安装失败，有很大的可能是网速不好，最好能耐心等一下，或找一个用网量较少的时间段再试一下，或者找一个网速好多的网络再试一遍。

 

安装 vue-meta-info 配置title和meta：

 

1、安装 vue-meta-info 配置title和meta：

npm install vue-meta-info --save

2、在main.js引入：

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

3、在vue页面中配置：

<script>
export default {
  // 配置title和meta数据
  metaInfo: {
    title: '我是一个title',
    meta: [
      {
        name: 'keywords',
        content: '关键字1,关键字2,关键字3'
      },
      {
        name: 'description',
        content: '这是一段网页的描述'
      }
    ]
  },
  data () {
    return {}
  }
}
</script>

到这里 prerender-spa-plugin 与 vue-meta-info 就全部完成了