公司项目，最初只为了实现前后端分离式开发，直接选择了vue框架进行开发，然而现在项目基本完成了，发现蜘蛛根本就抓取不到网站数据，搜索引擎搜出来，都是一片空白没有数据，需要对项目做SEO优化。
本人第一次接触SEO的优化，完全是零基础，开启了小白菜的SEO探索之旅，记录一下一路的过程，方便自己回顾与大家的探讨，如有不度之处，还请路过的大神指导一下。
常用SEO优化方式
在查阅了一些资料后，常见的SEO优化有以下两种：
- prerender-spa-plugin客户端预渲染
- ssr服务端渲染
在选择预渲染模式还是服务端渲染的模式时，简单做了个demo进行了一下测试，由于公司项目以检索为主的产品，后期需要蜘蛛抓取的界面太庞大，最终选择用vue提供的nuxt.js框架去改造现有的项目。
简单写一下prerender-spa-plugin客户端预渲染的过程
prerender-spa-plugin客户端预渲染
相关文档可查看：prerender-spa-plugin
安装
直接在vue项目中，通过npm或者yarn进行安装
##### Yarn
$ yarn add prerender-spa-plugin
##### NPM
$ npm i prerender-spa-plugin -S配置
在webpack.prod.js中配置
顶部引入：
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer在plugins中配置
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: 'config下index.js配置
// build时需要将'/'切换为'./'
assetsPublicPath: './'
到此整个预渲染模式，改造完成了。
此次demo中尚未处理meta信息，需要配置meta信息的，可查看文档vue-meta-info,这是一个基于vue 2.0的插件，它会让你更好的管理你的vue页面里面的meta信息，详细配置过程可参考：muwoo作者写的“处理 Vue 单页面 Meta SEO的另一种思路”文章，里边整个过程写的挺详细的
Nuxt.js框架改造现有Vue项目
作为新手，并不介意自己动手去配置环境，建议直接用nuxt.js提供的脚手架(create-nuxt-app)进行快速搭建项目，具体搭建过程可查看官网文档：Nuxt.js
nuxt.js项目搭建
确保安装了npx（npx在NPM版本5.2.0默认安装了)
$ npx create-nuxt-app <项目名>或者
$ yarn create nuxt-app <项目名>之后会有一系列的选项：
-
在集成的服务器端框架之间进行选择:
- None (Nuxt默认服务器)
- Express
- Koa
- Hapi
- Feathers
- Micro
- Adonis (WIP)
-
选择您喜欢的UI框架:
- None (无)
- Bootstrap
- Vuetify
- Bulma
- Tailwind
- Element UI
- Ant Design Vue
- Buefy
- 选择你想要的Nuxt模式 (Universal or SPA),不懂此选项的可以看一下这篇文章render mode的区别
- 添加 axios module 以轻松地将HTTP请求发送到您的应用程序中。
- 添加 EsLint 以在保存时代码规范和错误检查您的代码。
- 添加 Prettier 以在保存时格式化/美化您的代码。
官网都有详细的讲解，根据自己的需求选择就好了，当安装完后，项目就可以直接运行了
npm run dev*问题
在启动时遇到如下问题：
找了一圈，发现搭建项目时默认的element-ui版本太低，直接用npm uninstall element-ui卸载当前版本，重新使用npm install element-ui@版本号安装即可，版本号使用2.7.2及以上均可
项目目录简介
既然是对现有Vue项目的改造，就先看一下nuxt.js各目录的功能及vue项目目录的对比吧
nuxt.js的目录结构
├── assets // 资源文件。用于组织未编译的静态资源入LESS、SASS 或 JavaScript
│ └── logo.jpg // 默认logo图片
├── components // 组件。用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
│ └── AppLogo.vue // 默认logo组件
├── layouts // 布局。页面都需要有一个布局，默认为 default。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的 nuxt.js目录与vue.js目录的对比
整体来看，目录结构没有太大的变动，区别比较大的就是router文件夹，nuxt.js项目中并没有router路由的配置，这个就是 nuxt 框架的独到之处，为了能实现更好的SSR渲染，它使用的是根据页面结构，自动路由，所以你的文件名，就是你的路由名称，具体规则可查看官网文档路由。
好了，nuxt项目启动了，目录结构也清楚了，接下来就是整个现有Vue项目的迁移了
PS：目前正在改造项目，文章尚未写完，会抽时间不定期的继续更新vue项目的改造过程及分享改造过程中遇到的问题