• 快来用 Nuxt 开发静态网站


    2020年6月19日,NuxtJS 发布 v2.13.0
    2020年7月28日,NuxtJS 发布 v2.14.0

    要开发 SEO 的静态网站,又想享受框架开发的舒适,于是选择 Nuxt,可用来生成静态站总还是有些蹩脚,比如默认不支持动态路由等。

    这两个次版本的发布,终于让 Nuxt 开发静态网站方便多了!

    先说亮眼新特性:

    • v2.13 增加了 target: 'static' 配置,搭配指令 nuxt export 来生成完全静态的网站。
    • v2.14 用 nuxt generate 指令取代了 nuxt export,后者昙花一现退出 nuxt 舞台。
    • 可以处理动态路由了,无需另外 generate.routes 指定了。
    • 更智能的 nuxt generate,webpack 会跳过没有变化的文件,大大缩减了生成的时间。
    • 更智能的 nuxt start,generate 之后,可以使用 nuxt start 在本地运行生成的静态应用,用来进行部署前的测试,并且支持 SPA Fallback

    可以处理动态路由nuxt start 真是太棒了。

    target: 'static' + nuxt generate 生成的【完全静态】的应用又是什么意思呢?与之前 generate 生成的静态应用有什么区别?

    我们先来看一下 Nuxt 官网的一张图,阐述了 Nuxt.js 应用一个完整的服务器请求到渲染(或用户通 <nuxt-link> 切换路由渲染页面)的流程

    nuxt 服务器请求到渲染的过程

    可以看到,在 SSR 中,服务端会执行 asyncData()fetch(),用来访问接口生成数据,从而在服务端就渲染出页面内容。

    那么,在 generate 生成的静态应用中会怎样呢?如我们预料,生成的 dist 中的 html,就是执行过 asyncData()fetch() 的有数据内容的文件了。

    但是,当我们切换路由的时候,这两个函数又被调用了一遍,如果其中有接口调用,就会再次请求接口,拿回来最新的数据。问题是,这让页面切换变慢,而许多静态网站并不需要请求最新的数据。

    于是,【完全静态】的应用就被千呼万唤召唤出来了,它的接口请求的数据定格在 generate 的时候,部署后不会再通过 asyncData()fetch() 调用 API 了。这使得页面切换变得非常快。

    可是,对于某些页面,我还想要最新的数据,怎么办呢?别担心,新版的 nuxt 还很贴心地支持了 Preview mode:

    // plugins/preview.client.js
    
    export default async function ({ query, enablePreview }) {
      if (query.preview) {
        enablePreview()
      }
    }
    

    添加这个插件,然后在需要更新数据的页面 url 后面加上 ?preview=1 就可以做到了。


    参考

    Going Full Static
    NuxtJS 官方文档

  • 相关阅读:
    缓冲区溢出实验 6 exit(0)
    缓冲区溢出实验 1 strcpy
    缓冲区溢出实验 5 Snprintf
    [LeetCode] 130. Surrounded Regions 包围区域
    [LeetCode] 547. Friend Circles 朋友圈
    [LeetCode] 200. Number of Islands 岛屿的数量
    [LeetCode 695] Max Area of Island 岛的最大面积
    [LeetCode] 3. Longest Substring Without Repeating Characters 最长无重复字符的子串
    [LeetCode] 5. Longest Palindromic Substring 最长回文子串
    [LeetCode] 53. Maximum Subarray 最大子数组 --动态规划+分治
  • 原文地址:https://www.cnblogs.com/babywhale/p/13560563.html
Copyright © 2020-2023  润新知