小白vue.js-nuxtjs从入门到项目上线

之前公司一个官网项目直接用vue（spa）写的，结果写完之后，领导告诉我需要做SEO，当时瞬间的反应就是不会。后面陆陆续续找了几篇博客知道spa要做seo可以用下面几种方式：
1.SSR服务器渲染；
2.静态化；
3.预渲染prerender-spa-plugin；
4.使用Phantomjs针对爬虫做处理。
不过在尝试以后发现都有问题没法解决，然后没办法重新找方法，然后找到了nuxtjs。

nuxtjs入门

首先在百度找到了一篇nuxtjs项目创建的博客：Vue 创建 Nuxt 项目

然后参照这个博客，新建了自己的nuxt项目，在创建过程可能部分选项和博客中的不一样，不过大概按照这个来没有问题。
新建成功了，可是里面内容有些不太理解，这个时候就要祭出官方文档了：nuxt中文文档

根据文档基本内容和作用都有所了解后，我找了一个开源的nuxt项目作为参考：基于nuxt的开源项目

然后文档结合项目，基本将知识点和用法搞清楚了，然后我就开始搬我原先的代码。

代码搬迁过程的问题

（1）首先静态文件需要编译的还是放在assets文件夹，需要用到的组件还是在components中，其中组件的引用没有变化（甚至直接按照组件的名字可以直接用，不需要引入）
（2）然后是路由页面，由于在pages文件下的内容会根据目录自动生成路由，所以只需按照我原本的路由页面进行替换就好
（3）然后处理所有图片等文件的路径问题
（4）然后是全局css样式及js样式的引入，在nuxt.config.js中的css及plugins中引入，外部js及css在head中的link及script中引入（可以参考：nuxt.js 全局和局部引入js/css）
（5）由于引入了css，在服务端运行会导致打开浏览器的查看网页源代码中出现大量css，防止上线出现该情况，可以在nuxt.config.js中的build选项里添加该段代码 extractCSS: { allChunks: true }。

跟后端数据进行交互

官网提供了一种新的写法，理论上还是通过axios的方式。我根据官网和开源项目，结合自己本身项目，大概按照两种方式进行获取：
（1）首先只需要后台返回数据中的某项数据，例如data：

async asyncData ({ $axios }) {
		const { data:newsInfomation } = await $axios.$get(process.env.BASE_URL+'/api/information/',{
			params: {
			  page:1,
			  type:"com"
			}
		})
		return {
		  data: {
		    newsInfomation,
		  },
		}
	},

（2）需要获取全部的数据

async asyncData ({ $axios }) {
		const getSEO = await $axios.$get(process.env.BASE_URL+'/api/get_seo_seyword/',{
			params: {
			  page_id:1
			}
		})
		const [ seo ] = await Promise.all([getSEO])
		return {
		  seo
		}
	},

其中const [ seo ] = await Promise.all([getSEO])可以有多个值，例如const [ seo,seo2,seo3 ] = await Promise.all([getSEO,getSEO2,getSEO3]).

注意如果有传值需要添加传值检测

配置接口基础url

该内容我是参考的:nuxt全局配置接口地址
大概按照这个来没什么问题，注意上线后的地址变化

上线运行项目

首先项目需要通过build命令进行打包，然后将.nuxt，plugins，static文件夹，nuxt.config.js，package.json，package-lock.json打包发送给后端进行nginx配置。
可以参考：nuxt.js项目部署到阿里云服务器
注意在nginx的时候将项目的域名指向在服务器启动的地址即可

结言：
该篇博客主要用于记录第一次使用nuxt项目中遇到的一些问题，及一些解决的方法，便于后续使用的时候，少走弯路。为了方便引用了很多前辈的博客，在这里十分感谢这些前辈！