Vue现有项目改造为Nuxt项目 _vue

公司项目，最初只为了实现前后端分离式开发，直接选择了vue框架进行开发，然而现在项目基本完成了，发现蜘蛛根本就抓取不到网站数据，搜索引擎搜出来，都是一片空白没有数据，需要对项目做SEO优化。
本人第一次接触SEO的优化，完全是零基础，开启了小白菜的SEO探索之旅，记录一下一路的过程，方便自己回顾与大家的探讨，如有不度之处，还请路过的大神指导一下。
常用SEO优化方式
在查阅了一些资料后，常见的SEO优化有以下两种：
在选择预渲染模式还是服务端渲染的模式时，简单做了个demo进行了一下测试，由于公司项目以检索为主的产品，后期需要蜘蛛抓取的界面太庞大，最终选择用vue提供的nuxt.js框架去改造现有的项目。
简单写一下-spa-客户端预渲染的过程
-spa-客户端预渲染
相关文档可查看：-spa-
安装
直接在vue项目中，通过npm或者yarn进行安装##### Yarn$ yarn add prerender-spa-plugin##### NPM$ npm i prerender-spa-plugin -S
配置
在.prod.js中配置
顶部引入：
const PrerenderSPAPlugin = require('prerender-spa-plugin')const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
在中配置
new PrerenderSPAPlugin({//生成的预渲染html文件存放路径staticDir: path.join(__dirname, '../dist'),//需要预渲染的界面路径（router）routes: ['/', '/index'],//跨域转发配置,预渲染时获取数据的api地址server: {proxy: {'/api': {target: 'http://192.168.1.223:9002',changeOrigin: true,pathRewrite: {'^/api': '/'}}}},//在一定时间后再捕获页面信息，使得页面数据信息加载完成，必选，不然界面依然会没有数据captureAfterTime: 5000,//忽略打包错误maxAttempts: 10,renderer: new Renderer({//可选，页面在被搜索时的关键词inject: {foo: 'bar'},//可选，无桌面系统可去掉headless: false,//必选，‘render-event'必须与main.js中mounted下的配置名称一致renderAfterDocumentEvent: 'render-event'})})
在main.js中的配置
new Vue({el: '#app',router,store,template: '',mounted () {document.dispatchEvent(new Event('render-event'))}})
下index.js配置
// build时需要将'/'切换为'./'
: './'
到此整个预渲染模式，改造完成了。
此次demo中尚未处理meta信息，需要配置meta信息的，可查看文档vue-meta-info,这是一个基于vue 2.0的插件，它会让你更好的管理你的vue页面里面的meta信息，详细配置过程可参考：muwoo作者写的“处理 Vue 单页面 Meta SEO的另一种思路”文章，里边整个过程写的挺详细的
Nuxt.js框架改造现有Vue项目
作为新手，并不介意自己动手去配置环境，建议直接用nuxt.js提供的脚手架(-nuxt-app)进行快速搭建项目，具体搭建过程可查看官网文档：Nuxt.js
nuxt.js项目搭建
确保安装了npx（npx在NPM版本5.2.0默认安装了)
$ npx create-nuxt-app <项目名>
或者
$ yarn create nuxt-app <项目名>
之后会有一系列的选项：
在集成的服务器端框架之间进行选择:
选择您喜欢的UI框架:
选择你想要的Nuxt模式 ( or SPA),不懂此选项的可以看一下这篇文章 mode的区别添加 axios以轻松地将HTTP请求发送到您的应用程序中。添加以在保存时代码规范和错误检查您的代码。添加以在保存时格式化/美化您的代码。
官网都有详细的讲解，根据自己的需求选择就好了，当安装完后，项目就可以直接运行了