manbetxapp

静止

2020年6月18日读了5分钟
拍摄者Vincent Ledvina

读得太久了

  1. 升级NUXT到2.14.0
  2. 目标:'静态'在你的nuxt.config.js.
  3. 跑步nuxt生成
  4. 这是♥

奖金:你可以跑NUXT开始运行服务生成的静态应用程序的本地服务器。

注意:在此视频中我们正在使用NUXT出口这已被推翻支持nuxt生成

目录

历史

Nuxt有静态生成功能nuxt生成自从v0.3.2(2016年11月),从那时起,我们已经以多种方式改进了它,但从未实现过全面的静态生成。今天,我很高兴宣布,现在可以使用Nuxt 2.13进行全静电导出。

当前的问题

nuxt生成当您导航客户端时,大多是预渲染,Asyncdata.拿来叫做,向您的API提出请求。许多用户要求支持“完全静态”模式,这意味着不在导航上调用这2个挂钩,因为下一页已被预先呈现。

此外,开发人员体验不是最佳:

  • 你可以访问res.在SSR上,但没有在运行时nuxt生成
  • 过程真的只有在运行时nuxt生成,为静态生成开发Nuxt模块或插件而缓慢
  • 你必须指定所有的动态路线生成.Routes.,因为您无法访问那里的下一个模块,所以这就更加困难了。
  • 你无法测试SPA逆力在开发中,后备是您在击中404页时加载的核心应用程序的客户端版本
  • nuxt生成nuxt构建默认情况下,如果只更改您的内容,则无法生成您的网站

请注意,有可能具有完全静态支持Nuxt-Payload-Extractor模块,但使用并有局限性更详细。

新配置选项:目标

为了改善用户体验,并告诉next您希望将应用程序导出到静态托管,我们将引入一个目标选择在你nuxt.config.js.

nuxt.config.js.
出口默认{目标'静止的'//默认为“server”}

完全静态不起作用SSR:'false'(与已弃用的相同模式:'spa')因为这仅用于客户端渲染(单页应用程序)。

跑步NUXT DEV.静态目标将改善开发人员体验:

  • 去掉res.从上下文
  • 退回到客户端渲染404,错误和重定向(见SPA逆力
  • $ Route.query.将永远等于{}在服务器端渲染
  • 过程真的

我们也暴露了process.target.对于模块作者根据用户目标添加逻辑。

聪明nuxt生成

现在v2.14.0., 您可以使用nuxt生成,它将巧妙地知道它是否必须建立或不构建。

快速静态应用程序

nuxt生成目标:'静态'将将所有页面预先呈现给HTML并保存有效载荷文件以模拟Asyncdata.拿来在客户端导航,这意味着没有在客户端导航中更多HTTP调用您的API。通过将页面有效载荷提取到JS文件,它还减少了HTML大小服务并从中加载它(来自在标题中)以获得最佳性能。

我们还改善了智能预取完成完整静态时,它也将获取有效载荷,使导航即时

履带群

最重要的是,它内部也有一个爬虫,检测每个相关链接并生成它:

如果要排除一堆路线,请使用生成.Exclude.。你可以继续使用生成.Routes.添加爬网程序无法检测到的额外路由。

禁用爬虫,设置生成。浏览器:假在你的nuxt.config.js.

更快的重新部署

通过分离nuxt构建NUXT出口,我们正在开设新的改进范围:仅当您的内容已更改时才会呈现页面,这意味着:没有WebPack构建→更快的重新部署。

聪明NUXT开始

一旦您静态生成了Nuxt应用程序DIST /,使用NUXT开始要启动生产HTTP服务器并提供您的静态应用程序,请支持SPA逆力

在推送到您喜欢的静态托管提供商之前,此命令非常适合在本地测试静态应用程序。

预览模式

我们确实支持出于框中的Live Preview以继续调用您的API:

插件/预览.Client.js.
出口默认异步功能{询问enablePreview.}{如果询问预习{enablePreview.}}

它将自动刷新页面数据(调用nuxtserverinit.Asyncdata.拿来)。

激活预览模式时,Asyncdata.拿来将调用原始方法。

命令

取决于目标,您可以运行这些命令。

  • 服务器
    • NUXT DEV.:启动开发服务器
    • nuxt构建:捆绑您的生产申请
    • NUXT开始:启动生产服务器
  • 静止的
    • NUXT DEV.:启动开发服务器(静态感知)
    • nuxt生成:如果需要(静态识别)并将您的应用程序导出到静态HTML中,请捆绑您的NOXT应用程序DIST /目录
    • NUXT开始:提供您的生产申请DIST /

接下来做什么

  • 要了解更多关于如何从@nuxtjs/dotenv转移到运行时配置的信息,请查看本文
  • 订阅时事通讯不要错过即将到来的文章和资源。
nuxt. 静止的 爬行物 实时预览