前言 什么是 SEO？

SEO是英文Search Engine的缩写

，中文翻译为“搜索引擎优化”。 SEO是指网站的优化和修复（网站结构调整、网站内容建设、网站代码优化和编码等）和站外优化，以提高网站的网站关键词排名和网站的曝光率。公司的产品。通过搜索引擎搜索信息是网民查找网上信息和资源的主要方式。

引擎蜘蛛是如何工作的？

详情查看spider的工作原理；如果不够详细，请自行百度

搜索引擎蜘蛛的爬取是有一定规则进入的，需要符合一些命令或文件的内容。

网络爬虫在抓取网页内容时，需要对页面内容进行分析。要点如下：

为什么seo对Vue单页不友好？造成的问题

p>

收录的页面少->抓取的页面少->点击次数少之类的；

不能做TDK(title, , )不同的配置，每个页面的title和meta标签都一样，不利于网络爬虫的爬取

如何解决？

html不能由js生成。我们需要在加载 js 之前预渲染页面。目前我们知道的方法有两种，vue的ssr渲染（配置参考）和-spa-plugin插件实现（配置参考）。 SSR比较复杂，所以选择了-spa-plugin试试。

使用-spa-plugin

参见配置参考。

这次只介绍vue-cli3的解决方案

使用 webpack + -spa-plugin + vue-meta-info 轻松添加预渲染

npm install prerender-spa-plugin --save

vue.config.js

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
// eslint-disable-next-line no-unused-vars
const webpack = require('webpack')
const path = require('path')
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, 'dist'),
          // outputDir: path.join(__dirname, './'),
          // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          routes: ['/testData',  '/contact'],
          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
              inject: { //默认挂在window.__PRERENDER_INJECTED对象上，可以通过window.__PRERENDER_INJECTED.foo在预渲染页面取值
              foo: 'bar'
            },
            headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            renderAfterDocumentEvent: 'render-event'//等到事件触发去渲染，此处我理解为是Puppeteer获取页面的时机
          })
        })
      ]
    }
  },
}

showMessage(){
      if(window.__PRERENDER_INJECTED && window.__PRERENDER_INJECTED.foo =='bar') return;
      this.message = '我是测试预加载拦截';
    }

main.js

new Vue({
  router,
  store,
  render: h => h(App),
//添加到这里,这里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名称一致
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

然后npm run build打包1.在router.js中，mode应该是'history'，hash模式打包的时候会生成同样的页面，所以必须打包上传到服务器。

2.看效果，或者自己在本地创建服务

这样dist的文件夹目录结构会变成如下

打包后，每条路由都会打包到一个文件夹中，对应的静态HTML；

除了每个 HTML

除了这个Vue挂载元素，还有静态标签内容。

遇到的问题

1.在本地启动服务测试，你会发现可以正常运行，但是已经优化了页面刷新后就没有样式了。

问题原因是打包时vue.config.js的资源路径配置错误。

没有优化前的路径是

  // 资源路径
  publicPath: './',

打包后路由下面的资源路径是这样的

解决方案

优化后的路径是

  // 资源路径
  publicPath: '/',

打包路由下的资源路径是这样的

路径前有/，使用绝对路径

这次需要一个服务来测试

1.全局安装node.js

2.安装成功后，执行npm install -g进行安装

3.在对应路径打开cmd，执行命令。如图：

然后可以在浏览器中输入地址访问，就可以看到每条路由对应的HTML

Browse 浏览器访问你的ip:8000/contact后，可以看到内容和对应的html

鼠标右键可以看到元素

-spa-plugin如何将运行时html打包成文件？ -spa-plugin确实在一定程度上解决了我们的SEO需求和页面加载慢的问题。但它的缺点还是很明显的。然后就是给这些打包好的静态页面分配title和meta标签，需要用到vue-meta-info

安装
npm install vue-meta-info --save

main.js 引入 vue-meta-info

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

这可以在组件页面中使用

假设你想给contact.vue添加title和meta标签

p>

contact.vue

这个结合-spa-plugin，打包后在dist文件夹中找到contact文件夹下的index。 html

打开你会发现有title和meta的关键词和描述标签

本地启动服务或发布到在线运行项目，页面右键-查看源码-可以看到页面的title和meta标签。