Vue现有项目改造为Nuxt项目
公司项目，最初只为了实现前后端分离式开发，直接选择了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: '下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请求发送到您的应用程序中。添加 以在保存时代码规范和错误检查您的代码。添加 以在保存时格式化/美化您的代码。
官网都有详细的讲解，根据自己的需求选择就好了，当安装完后，项目就可以直接运行了
npm run dev问题
在启动时遇到如下问题：
找了一圈，发现搭建项目时默认的-ui版本太低，直接用npm -ui卸载当前版本，重新使用npm -ui@版本号安装即可，版本号使用2.7.2及以上均可
项目目录简介
既然是对现有Vue项目的改造，就先看一下nuxt.js各目录的功能及vue项目目录的对比吧
nuxt.js的目录结构
├── // 资源文件。用于组织未编译的静态资源入LESS、SASS 或
│ └── logo.jpg // 默认logo图片
├── // 组件。用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
│ └── .vue // 默认logo组件
├── // 布局。页面都需要有一个布局，默认为 。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的 标签中。
│ └── .vue // 默认模板页面，类似mvc中的
├── // 中间件。存放中间件。可以在页面中调用： : '' 。
├── pages // 页面。一个 vue 文件即为一个页面。
│ └── index.vue // 默认首页面
├── // 用于存放插件的地方
│ └── -ui.js // 上边我们安装的UI框架
├── // 用于存放静态资源文件，比如图片，此类文件不会被 Nuxt.js 调用 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
├── store // 用于组织应用的Vuex 状态管理。
├── . // 开发工具格式配置
├── ..js // 的配置文件，用于检查代码格式
├── . // 配置git不上传的文件
├── nuxt..js // 用于组织Nuxt.js应用的个性化配置，比如网站title，已便覆盖默认配置
├── .json // npm包管理配置文件
└── .md // 说明文档
nuxt.js目录与vue.js目录的对比
整体来看，目录结构没有太大的变动，区别比较大的就是文件夹，nuxt.js项目中并没有路由的配置，这个就是 nuxt 框架的独到之处，为了能实现更好的SSR渲染，它使用的是根据页面结构，自动路由，所以你的文件名，就是你的路由名称，具体规则可查看官网文档路由。
好了，nuxt项目启动了，目录结构也清楚了，接下来就是整个现有Vue项目的迁移了。
迁移项目
目录结构重组
因为之前写习惯了vue项目，并不太想改动目录结构，就简单粗暴的在nuxt目录下新建了一个src目录，将、、、、pages、以及store全部拖到了src中，src继续保持与同级，这样整个项目结构跟vue没有啥区别了。
最终的项目结构如下如：
PS：在添加了src后需要修改一下项目的启动配置，在nuxt..js中修改为'src/'
已有vue页面迁移
将vue中对应的页面放到现在的nuxt目录下对应的位置，注意一下vue文件的命名就可以
全局配置文件及第三方组件的迁移
vue项目中有用到一些全局配置文件和第三方文件，这部分js的话，直接放在中，以扩展组件的形式在项目启动时，挂载到全局中
1.自定义的配置文件修改
将自定义的变量绑定到vue的原型中，Vue.use注册到vue项目中，在vue文件中可以直接用$(自定义的变量名)调用该变量，而不需要再单独去了；最后用 抛出该变量，是为了在其他js中使用。
PS：只有在vue页面中使用该变量时不需要，如果要在其他的js中使用，还是需要进来的。
2.第三方组件的迁移
直接用npm 将第三方组件加载到项目中，在需要的vue界面用载入就可以，但是需要注意的一点是，第三方组件中可能用到了、等浏览器对象，而nuxt项目是需要在客户端和服务端都要进行运行的，服务端并没有等对象，在服务端运行时会报错，所以第三方组件也跟自定义组件类似的用组件的形式载入比较安全，在下单独创建一个同名的js文件，判定是客户端时再去加载该组件就行了。
中扩展组件的相关配置
在中创建的js需要再项目启动时注册到项目中，也就是在nuxt..js中的中进行配置
plugins: [{ src: '@/plugins/config.js', ssr: true },{ src: '@/plugins/d3.js', ssr: true }
]全局样式文件迁移
全局样式文件css，在nuxt..js配置文件中的css中引入
css: ['@/assets/index.css'
]用户登录状态store的迁移
项目比较着急，实在懒得用nuxt提供的方式再去改造这部分代码，直接沿用了vue中和方式，暂时项目并没有出现问题（后期如果有问题再做修改）
PS：如果该js中用到了等浏览器的对象，加个.去判断就行，其余的可以不用修改
-ui的迁移
跟vue一样先npm -ui --save，之后再下新建一个-ui.js文件,内容如下：
import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'Vue.use(Element, { locale })然后再nuxt..js中进行配置：
plugins: [{ src: '@/plugins/element-ui', ssr: true }
],
css: ['element-ui/lib/theme-chalk/index.css'
]防止-ui多次被打包，在nuxt..js下的build中进行配置
build: {vendor: ['element-ui']
}的使用
npm --save
然后再nuxt..js下的build中配置
build: {plugins: [new webpack.ProvidePlugin({'$': 'jquery','jQuery': 'jquery','window.jQuery': 'jquery'})]
}axios和$axios的使用
因为vue中用了axios，后期也没有修改原来的api请求，所以就继续使用了axios，直接npm axios --save安装，在需要使用的地方即可。
如果在vue项目中已经封装了axios，直接可以把vue中写的关于api的js都挪到下，把 axios抛出，再在nuxt..js下按照扩展的配置在中添加就可以正常使用了。
plugins: [{ src: '@/plugins/api/index.js', ssr: true }
],正常客户端的请求使用axios并没有什么问题，而在预加载服务端请求时就比较麻烦了，在请求中使用了nuxt默认集成的$axios，这个需要再nuxt..js下的中配置
modules: ['@nuxtjs/axios','@gauseen/nuxt-proxy'
],跨域代理配置：
proxyTable: {'/api/': {target: '数据请求的ip地址',ws: false,pathRewrite: {'^/api': '/'}}},下数据请求
单个请求：
async asyncData ({ app, params }) {let { data } = await app.$axios.get(url).then(res => {...})
}多个请求：
async asyncData ({ app, query }) {// 请求带参数时的写法，query指的是当前访问的url中携带的参数let searchQuery = {type: query.searchTag,q: query.searchKeys,page: 1}const [nounList, resultList] = await Promise.all([app.$axios.get('请求的api地址', { params: { q: query.searchKeys }}),app.$axios.get(`/api/search/${searchQuery.type}`, { params: searchQuery })])return {nounList: nounList.data,resultList: resultList.data}}一般情况下数据请求
this.$axios.get(url).then(res => {...})
PS：整个项目中可以同时使用axios和nuxt默认集成的$axios，可以根据自己的需求合理使用
总结
到现在整个vue项目基本上都改造完了，可以正常使用了。
第一次接触nuxt，对其中的一些原理不是很懂，查阅了大量的文档和别人的博客，虽然完成了这次的改造，但整个项目还是存在一些瑕疵，还在不断的改善中。
细节
遗留的问题
PS：目前整个项目还在持续测试和完善中，后续会将遇到的问题和解决方案不定期的更新，有问题或者不完善的地方随时欢迎各位小伙伴提意见，我们一起探讨呀
