vue是单页面框架且前后端分离，不利于seo优化。针对这一点，还是有解决办法的。

什么是SEO优化？

体现到代码上就是：(最重要的一个就是meta标签的展示)

meta标签中的name:可以使用keywords和description来添加搜索引擎的关键字和描述信息。这个就是爬虫会提取的部分。

以下部分是同事提供的，我暂时没有用到，在此做下记录，希望后续有帮助：

prerender-spa-plugin——轻量级的seo解决方案

prerender-spa-plugin:轻量级的seo解决方案，对于大型项目不适用

使用方法如下：

1.安装插件

npm install -D vue-meta-info
npm install -D prerender-spa-plugin

2.全局引入插件——vue-meta-info

在main.js文件中引入

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

3.在需要的页面使用——vue-meta-info

<script>export default{metaInfo(){return{title:'首页',meta:[{name:'keywords',content:'测试'},{name:'description',content:'描述'}] }}}</script>

4.prerender-spa-plugin——vue.config.js文件配置

prerender-spa-plugin这个插件依赖于爬虫来抽取页面，检索SPA并生成预渲染内容(即’SSR’);

vue.config.js文件配置如下：

const PrerenderSPAPlugin = require('prerender-spa-plugin');const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;const path = require('path');let webpackPlugins = "";if(process.env.NODE_ENV.includes('production')){webpackPlugins = {plugins:[new PrerenderSPAPlugin({//生成文件的路径，也可以与webpack打包的一致//这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动staticDir:path.join(__dirname,'dist'),//对应自己的路由文件，比如a有参数，就需要写成/a/paramlroutes:['/home'],//这个很重要,如果没有配置这段，也不会进行预编译renderer:new Renderer({inject:{foo:'bar'},headless:false,//在main.js中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上renderAfterBocumentEvent:'render-event'})})]}}

5.prerender-spa-plugin——main.js文件配置

new Vue({router,store,render:h=>h(App),mounted(){document.dispathEvent(new Event('render-event'))}}).$mount('#app');