共计 3270 个字符，预计需要花费 9 分钟才能阅读完成。
公司项目，最初只为了实现前后端分离式开发，直接选择了 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: '<App/>',
mounted () {document.dispatchEvent(new Event('render-event'))
}
})
```
##### 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 /> 标签中。│ └── default.vue // 默认模板页面，类似 mvc 中的 layout
├── middleware // 中间件。存放中间件。可以在页面中调用：middleware: 'middlewareName'。├── pages // 页面。一个 vue 文件即为一个页面。│ └── index.vue // 默认首页面
├── plugins // 用于存放 JavaScript 插件的地方
│ └── element-ui.js // 上边我们安装的 UI 框架
├── static // 用于存放静态资源文件，比如图片，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。├── store // 用于组织应用的 Vuex 状态管理。├── .editorconfig // 开发工具格式配置
├── .eslintrc.js // ESLint 的配置文件，用于检查代码格式
├── .gitignore // 配置 git 不上传的文件
├── nuxt.config.js // 用于组织 Nuxt.js 应用的个性化配置，比如网站 title，已便覆盖默认配置
├── package.json // npm 包管理配置文件
└── README.md // 说明文档
nuxt.js 目录与 vue.js 目录的对比
整体来看，目录结构没有太大的变动，区别比较大的就是 router 文件夹，nuxt.js 项目中并没有 router 路由的配置，这个就是 nuxt 框架的独到之处，为了能实现更好的 SSR 渲染，它使用的是根据页面结构，自动路由，所以你的文件名，就是你的路由名称，具体规则可查看官网文档路由。
好了，nuxt 项目启动了，目录结构也清楚了，接下来就是整个现有 Vue 项目的迁移了
PS：目前正在改造项目，文章尚未写完，会抽时间不定期的继续更新 vue 项目的改造过程及分享改造过程中遇到的问题
