Vue SEO处理1——Vue-meta-info&prerender-spa-plugin

先基于vue-cli脚手架就安装，并初始化一个一个项目目录myvue

npm i webpack -g

npm i vue-cli -g

vue init webpack myvue

不会安装脚手架的，参照我的帖子
http://blog.csdn.net/aeoliancrazy/article/details/79083672

安装2个插件

npm i vue-meta-info

npm i prerender-spa-plugin

从prerender-spa-plugin的github上下载案例
https://github.com/chrisvfritz/prerender-spa-plugin

打开myvue文件夹中的package.json文件
和刚下载的案例里面的package.json文件
在myvue的packa.json中的devDependencies中添加对应的缺少项

添加myvue中的package.json文件中缺少的配置项

删除myvue中的package.json.lock文件
用命令提示符cd进入myvue运行npm i 以确保成功安装新增的配置文件
记住一定要先删除.lock文件

先运行npm run dev 查看页面是否正常

正常不报错，进行下一步

引入Vue-meta-info和prerender-spa-plugin

全局引入vue-meta-info
在src/main.js中引入

扫描二维码关注公众号，回复： 516493 查看本文章

import Vue from 'vue'
import MetaInfo from 'vue-meta-info'

Vue.use(MetaInfo)

组件内静态使用 metaInfo
例如在App.vue文件中

<template>
  ...
</template>

<script>
  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }],
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>

在build目录的webpack.prod.conf.js中引入PrerenderSpaPlugin插件

const PrerenderSpaPlugin = require('prerender-spa-plugin')

在插件用新增并设置 PrerenderSpaPlugin
在 plugins: [ ]中

    new PrerenderSpaPlugin(
      // Absolute path to compiled SPA
      path.join(__dirname, '../dist'),
      // 列出需要预渲染的路由名称
      // 如果没有对应的路由，也会生成对应的目录
      [ '/', '/about', '/contact' ]
    ),

然后打包

npm run build

打包完成后的dist文件夹的解构为

打开dist文件夹中的index页面，反键，查看源代码，可以看见全部的源代码了

打包的时候注意修改config文件夹中的index中的build中的assetsPublicPath: '/',改为'./'

注意在打包的时候，在根目录一定要有favicon.ico图表，否则会报错

参考帖：
https://zhuanlan.zhihu.com/p/29148760
https://github.com/chrisvfritz/prerender-spa-plugin

余留问题：
1.如果组件或是路由中的内容可能会没有预渲染出来
2.通过ajax或是axios发请求后获得的数据没有预渲染出来
有没有大佬帮忙解决一下这个问题