V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
liulian
V2EX  ›  问与答

问个 nuxt 框架的问题

  •  
  •   liulian · 2020-05-12 18:49:25 +08:00 · 2423 次点击
    这是一个创建于 1654 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题描述:nuxt 静态化后发现依旧会请求数据接口 手里有个项目用的是 nuxt 框架做的,使用 nuxt 提供的 generate 打包部署在服务器后,请求静态化的页面发现依旧会去请求接口,接口数据是在 asyncData 方法中获取的,查看源代码也发现数据已经成功绑定,在网上查了半天也没有查到解决办法,有没有大佬遇到过类似的问题,给小弟支支招

    21 条回复    2020-06-12 10:50:31 +08:00
    liulian
        1
    liulian  
    OP
       2020-05-12 18:52:03 +08:00
    不知道为啥没换行。。再重新发一遍

    问题描述:nuxt 静态化后发现依旧会请求数据接口

    手里有个项目用的是 nuxt 框架做的,使用 nuxt 提供的 generate 打包部署在服务器后,请求静态化的页面发现依旧会去请求接口,接口数据是在 asyncData 方法中获取的,查看源代码也发现数据已经成功绑定,在网上查了半天也没有查到解决办法,有没有大佬遇到过类似的问题,给小弟支支招
    feibinyang
        2
    feibinyang  
       2020-05-12 19:09:44 +08:00
    asyncData 是会请求数据的吧,你想要做成什么样的?
    liulian
        3
    liulian  
    OP
       2020-05-12 19:20:36 +08:00
    现在的情况是已经静态化的页面依旧会请求接口。按理说数据已经成功绑定,只加载静态化的页面不是就行了吗,你们有遇到过类似的问题吗
    liulian
        4
    liulian  
    OP
       2020-05-12 19:22:58 +08:00
    @feibinyang 刚开始用 V2EX 回复错地方了。。
    Coande
        5
    Coande  
       2020-05-12 19:33:17 +08:00 via Android
    应该用 nuxt start 吧?
    Coande
        6
    Coande  
       2020-05-12 19:38:17 +08:00 via Android
    @Coande generate 生成的话 asyncData() 应该就没有意义了,相当于普通 SPA 了吧。(猜的)
    mxT52CRuqR6o5
        7
    mxT52CRuqR6o5  
       2020-05-12 19:41:16 +08:00 via Android
    asyncData 也能静态化吗?你这个应该启个 ssr 服务器吧
    liulian
        8
    liulian  
    OP
       2020-05-12 19:47:19 +08:00
    @Coande 官方文档上说的要在 asyncData()中获取异步数据啊。。。
    liulian
        9
    liulian  
    OP
       2020-05-12 19:57:41 +08:00
    @mxT52CRuqR6o5 asyncData 只是获取数据而已,如果不在 asyncData 中获取数据要在哪里获取数据哪,ssr 服务器是什么意思?
    Coande
        10
    Coande  
       2020-05-12 19:59:29 +08:00 via Android
    @liulian 我的理解是,你得用 nuxt start 启动一个 SSR 后端服务,访问页面的时候,这个服务才调用 asyncData() 去获取数据并渲染页面,然后将渲染好的页面返回给前端。
    mxT52CRuqR6o5
        11
    mxT52CRuqR6o5  
       2020-05-12 20:00:04 +08:00 via Android
    @liulian
    When generating your web application with nuxt generate, the context given to asyncData and fetch will not have req and res.
    我说的 ssr 就是指运行 nuxt start 启动一个服务器
    liulian
        12
    liulian  
    OP
       2020-05-12 20:09:39 +08:00
    nuxt build 和 nuxt start 是 服务端渲染应用部署 用的,我现在的项目用的是 静态应用部署,另外在 async 中也没有使用,req 和 res
    liulian
        13
    liulian  
    OP
       2020-05-12 20:09:48 +08:00
    @mxT52CRuqR6o5 nuxt build 和 nuxt start 是 服务端渲染应用部署 用的,我现在的项目用的是 静态应用部署,另外在 async 中也没有使用,req 和 res
    terranboy
        14
    terranboy  
       2020-05-12 21:48:59 +08:00
    generate 是生成静态文件 把 API 断掉看看吧
    ThiagoJC
        15
    ThiagoJC  
       2020-06-09 15:15:48 +08:00
    nuxt 静态化之后,asyncData return 的数据会绑定到 window.__NUXT__.data 上 ,你可以打印看看是个数组。asyncData 里用 ctx.isStatic 判断,如果是 true 就直接 return window.__NUXT__data[0]
    liulian
        16
    liulian  
    OP
       2020-06-11 10:07:25 +08:00
    @ThiagoJC 静态化以后在源代码中的确可以看到 window.__NUXT__.data 但是这里有两个问题:
    1 、在 asyncData 中是获取不到 window 对象的,
    2 、ctx.isStatic 是您自己注入的吗,我在 nuxt 中没有看到关于这个的解释
    ThiagoJC
        17
    ThiagoJC  
       2020-06-11 11:41:57 +08:00
    ThiagoJC
        18
    ThiagoJC  
       2020-06-11 11:42:47 +08:00
    @liulian nuxt 静态化之后 asyncData 是在客户端运行的,是可以拿到 window 对象的,所以使用之前需要判断是不是静态
    ThiagoJC
        19
    ThiagoJC  
       2020-06-11 11:47:52 +08:00 via iPhone
    ThiagoJC
        20
    ThiagoJC  
       2020-06-11 11:59:46 +08:00
    @liulian 现在用 process.static
    liulian
        21
    liulian  
    OP
       2020-06-12 10:50:31 +08:00
    @ThiagoJC 准确的说应该是使用 process.static && process.server 和 process.static && process.client 来分别区分使用的是 generate 打包命令还是在客户端。
    不过这里又遇到了一个问题,当我通过 nuxt-link 标签进行页面跳转时获取到的 window.__NUXT__.data[0]是个空对象,但是刷新一下页面或者使用 a 标签进行页面跳转就可以获取到完整信息。不知道您那边有没有遇到类似的问题,如果方便可以看下您的代码片段吗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   972 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 21:21 · PVG 05:21 · LAX 13:21 · JFK 16:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.