欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

nuxt,从开发到线上部署

程序员文章站 2022-03-27 09:36:11
...

起因:

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

最后附上项目地址:

绘佳新***官网