nuxt，从开发到线上部署

起因：

前段时间，同组小伙伴使用vue做了一个小后台，使一位后端沉寂多年得求道之心又躁动了起来。。。然后，当我和这个躁动起来得后端要合作重构一个网站得时候，后端小哥哥说，就知道套页面，套页面，不用新技术，那一脸得恨铁不成钢 我至今想起来犹觉得记忆犹新，然后就有了后面得踩坑之路。

关于nuxt -- nuxt是一套基于vue，整合了vue全家桶得框架，为什么要选他呢，主要是因为可以解决seo问题。

现在想从头开始回顾一下自己遇到得坑：

• 首先遇到得一个比较严重得问题是，微信相关得业务，而整个项目就用到了两个，一个是微信登陆，另外一个是微信分享。

解决方案

就是自己用express写了个回调页，百度一下node微信登陆，基本套路搞清楚之后，就是在最后拿到unionid openid之后返给后端，生成token，再将token写进cookie里，重定向到发生跳转时得那个页。至于微信分享，也是写了个接口，唯一自己做了点额外得工作，也必须做得就是缓存了一下accesstoken和jsticket。

• 然后是关于一个vue中使用swiper小插件得一个坑，有个页面是做成tab切换了，而后下边tab得内容需要做成联动得，这就需要我在swiper动画结束得回调里取得当前得activeIndex

解决方案

直接贴代码

swiperOption: {

    on: {
        slideChange:() => {
            if( this.mySwiper )
            this.curActiveItem = this.mySwiper.activeIndex;
        }
    }
},

这个坑得主要来源是swiper回调得时候是没有参数得回调，本来会以为将当前得activeIndex直接传到回调里，可是这个回调时真的没有参数，后来只能通过这种方式比较曲折得拿到index，进而使上边得tab发生联动效果。

• 活久见： fixed 定位得参考目标不是视口

解决方案

这个也是在搞这个swiper得时候出现得，后来发现了问题得来源：

当元素祖先的 transform  属性非 none 时，容器由视口改为该祖先。

然后解决方案就是不在具有transform属性得元素里边使用fixed定位呗。但是在多组建嵌套的时候，由于不注意更容易出现这个问题。

• 项目部署，自己写的接口404了

解决方案

既然已经自己用express重写server了，就需要把server也和打过包的文件一起上传到服务器，然后启动命令start变成 cross env 参数  server/index.js 。这个坑是最可怕的，官方文档在这一步上一笔带过，其他的博客也没提到过这个，为了这个同组的小伙伴都愁的不要不要的了。

而后其他的都是些小问题了，整个站说大不大，说小不小，总共花费了整整十天的时间，真的是从零到一的过程，此前我们公司从来没有干过这个。当初决定使用nuxt也是我向总监提的，自然，整个过程中就感受到很多无形的压力，睡眠质量都不好了。幸好，最后也算正常的上线了，网页比起以前也有了更好的用户体验，对于我们程序员来说也算提高了点工作效率，维护起来不变得比以前容易了。

最后附上项目地址：

绘佳新***官网