https://blog.csdn.net/qq_38652744/article/details/84648683?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242
https://blog.csdn.net/yanby921005/article/details/80305971（seo优化-页面内容优化）
https://github.com/muwoo/vue-meta-info（vue-meta-info官网）
正文：
前提：已完成vue单页面开发，使用的hash模式，但现在需要对网站进行seo优化
选择seo优化的方式：对于项目的现状，选择“预渲染”方式进行seo优化
优化步骤：
一、首先搜索引擎对于#后面的内容（锚）点一般是不收录的，所以需要先把hash模式改成history模式
1.router文件夹中index.js
export default new Router({ mode: 'history', base: '/',//如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base routes: [] })
2.改成history模式后，后台的配置上篇文章已经说明，地址https://www.cnblogs.com/duanzhenzhen/p/11585952.html
3.安装prerender-spa-plugin
// 安装 cnpm install prerender-spa-plugin --save
4.在webpack.prod.conf.js头部引入prerender-spa-plugin：
// 头部引入 const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
5.在webpack.prod.conf.js的plugins里面添加：
new PrerenderSPAPlugin({ // 生成文件的路径，也可以与webpakc打包的一致。 // 下面这句话非常重要！！！ // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname, '../dist'),
//包文件输出目录，必须为根目录，否则加载不了样式
outputDir:path.join(config.build.assetsRoot,'/'),
// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。 routes: ['/', '/a', '/b', '/c', '/d'], // 预渲染代理接口
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'
})
}),
6.在main.js里面修改：
new Vue({ el: '#app', router, components: { App }, template: '<App/>', // 添加mounted，不然不会执行预编译 mounted () { document.dispatchEvent(new Event('render-event')) } })
7.安装 vue-meta-info 配置title和meta：
cnpm install vue-meta-info --save
8.在main.js引入：
import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo)
9.在vue页面中配置：
<script> export default { // 配置title和meta数据 metaInfo: { title: '我是一个title', meta: [ { name: 'keywords', content: '关键字1,关键字2,关键字3' }, { name: 'description', content: '这是一段网页的描述' } ] }, data () { return {} } } </script>
若设置关键词或描述信息为动态数据，
metaInfo(){ return { meta: [{ name: 'keyWords', content: this.list1 //变量或字符串 }, { name: 'description', content: this.list2 }] } },
10.完成
效果
补充：title格式：xxx_xxx_xxx；或xxx,xxx,xxx（包含网站定位和转化（即用户看到后能主动点进去，如：用户看到“环保地板十大品牌”中的“十大品牌”就会更容易进入网站））
原文链接：https://www.cnblogs.com/duanzhenzhen/p/11433923.html
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/22438
