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也是我向总监提的,自然,整个过程中就感受到很多无形的压力,睡眠质量都不好了。幸好,最后也算正常的上线了,网页比起以前也有了更好的用户体验,对于我们程序员来说也算提高了点工作效率,维护起来不变得比以前容易了。

最后附上项目地址:

绘佳新***官网

posted @ 2019-01-26 09:36  子龙_子龙  阅读(20)  评论(0编辑  收藏  举报