作为一个前端菜鸡，手头上的vue项目刚刚完结，也许老板看我们太闲（哈哈哈哈哈开玩笑）就提出了个新需求，网站内容支持SEO，当时我的表情是脸上笑嘻嘻，众所周知，现在前端三大框架（用的比较多的）vue，react和Angular都是单页运用为主的，弊端就在于对seo不友好，这要我支持seo岂不是要重构项目？算了既然需求来了就先调研一下吧，度娘给出的答案不少，比如prerender-spa-plugin + vue-meta-info 预渲染，然而这种方法我并没有成功，也许是我打开方式不对，还有其他方法我觉的不适合之前的项目，没办法那就重构吧，于是我开始了nuxt.js的爬坑之路。
1.Nuxt.js是什么？
Nuxt.js就是一个基于Vue.js的通用框架。nuxt.js官网介绍的很详细，想要了解的话建议去nuxt官网看看，其集成了vue2，vue-router，vuex和vue-meta，是一个基于vue.js的框架，个人理解就是vue+ssr实现服务器渲染从而支持seo，也就是说vue支持的功能nuxt也能支持，就是表达方式不一样而已，相对于我这种只用过vue的菜鸡来说nuxt还是很友好的~~~
2.着手nuxt
跟着官网代码开始写个小demo，体验一下nuxt能带来什么快感，刚开始看文档，好的开始懵逼了，恩？创建流程为什么这么麻烦？说好的基于vue的呢，有没有那种一条命令行就能解决的办法呢？于是我有开始找度娘了，嘿嘿嘿真被的找到了，vue init nuxt-community/starter-template testPro --testPro为项目名称，一条命令解决哈哈哈哈哈，详情见搭建nuxt项目。但是！！我这种想法明显是不对的！！请各位看官老老实实的按照官网安装流程走一遍好吧！因为我也走了好几遍才开始找捷径的（害羞脸）。
废话不多说了好吧，跟着官网文档敲写了一个小demo，根据官网介绍，只要在相关页面设置title就可以支持SEO了，比如这样
page下user文件夹里的about.vue文件
好的一切就绪了来nuxt dev运行一下，但是！but！我要怎么测试呢？没关系这个可难不倒我这个小机灵鬼，问大神就知道了呀哈哈哈哈。大神给我推荐了curl工具，百度下载安装就好了，开始测试一下
page下user文件夹里的one.vue文件
curl工具爬出来的title
从上面两张图里可以看到，curl我本地项目路径出来的title跟我在one.vue里设置的title是一样的，这说明我成功了！！部到服务器上试试，这里要注意一下，nuxt有两个打包命令，一个是nuxt build一个是nuxt generate，两者的区别官网也有给出介绍
nuxt命令列表
具体我也没太搞明白，根据我的需求我用你nuxt generate进行打包部署，一些都OK，成功了哎~完结撒花~~~
3.判断访问设备
你以为我碰到的坑只有这么点儿？不！真正的坑还在后面！由于我之前写的项目有web端和移动端的，那么就要判断当前放问的设备来决定展示的是web端项目还是H5项目了，这里贴上判断设备代码，方法不是唯一的，不想用这个方法的看官们可以自行百度
判断当前访问设备
在vue项目里这段代码我是直接写在index.heml里的，但是nuxt我应该怎么写呢？官网关于布局一块说可以自定义，于是我也在nuxt项目新建了一个index.heml文件，nuxt dev运行一下，哎好像不行哎，首先curl爬到的就一直是这个index.html了，title也没变化，看样子不能这么搞呀。
好吧我又重头看了一遍nuxt的渲染流程，请求 —> 服务器 —> middleware(中间件) —>validte —> asyncDate()&fetch() —>render，也就是说渲染之前会先执行middleware，那我在middleware新建一个indes,js，把这段代码放进去在layout里引用这个可不可以呢？试试吧，一顿操作之后再dev，嗯window is underfind？哦对不起忘记了，nuxt是服务器渲染的，window是浏览器事件当然没有啦！那么也就是说navigator也没有咯？知道问题所在改起来就有方向了，于是把代码改成这样
middleware下的device.js
继续dev，OK这次成功了，可以！curl运行也是正常的！打包部署一下看看，然后....
generate打包报错
WTF?headers没有，也就是说明process.server判断是ture，那为啥会没有context.req.headers？想不明白卧槽！各种百度无果，这个坑我趴了一天没爬出来，突然！既然这条路走不通，那我为什么不试着绕开这条路呢，我能不能把这个文件直接放到服务器上然后在nuxt.config.js里面当成js文件引入到头部运行呢？nuxt.config.js配置如下
nuxt.config.js 配置测试一下，dev运行，没问题！curl爬取，正常！generate打包，也没问题！哈哈哈哈哈哈成功了！！！
（PS：菜鸟前端第一次在简书写文章，看官们有何指教可私聊加微信，欢迎抛砖~~~）
（PPS：喷子们嘴下留情，我知道我是菜鸟>-<）
网友评论