前端开发中，我们通常会将页面代码编写为静态页面，然后上传到服务器，用户通过访问服务器上的静态页面来访问我们的网站。但是，如果我们的网站内容比较丰富，页面数量较多，频繁手动编写静态页面不仅费时费力，而且容易出错。因此，我们需要一个快速生成静态页面的工具。这时，@nuxt/static 可以帮助我们解决这个问题。
什么是 @nuxt/static
@nuxt/static 是一个 npm 包，可以通过它快速地将 Nuxt.js 应用程序转换为无需服务器端运行的静态网站，支持 SPA（单页面应用）和服务端渲染(SSR)模式。@nuxt/static 提供了一个命令行工具 nuxt generate，可以根据 Nuxt.js 应用程序生成静态页面。
如何使用 @nuxt/static
安装 @nuxt/static
我们在使用 @nuxt/static 之前需要先安装它，可以通过 npm 进行安装，命令如下：
--- ------- ------------
或者，我们在创建 Nuxt.js 项目时可以选择使用 @nuxt/static，命令如下：
--- --------------- --------------
然后选择以下选项：
- Project name: 项目名称
- Programming language: JavaScript
- Package manager: npm
- UI framework: None
- Nuxt.js modules: @nuxtjs/axios, @nuxtjs/pwa, @nuxtjs/eslint-module
- Linting tools: ESLint
- Testing framework: None
- Rendering mode: Universal (SSR / SSG)
- Deployment target: Static (Static/Jamstack hosting)
使用 @nuxt/static
在安装好 @nuxt/static 之后，我们就可以在 Nuxt.js 项目中使用它了。下面我们以一个简单的 Nuxt.js 项目为例，来介绍 @nuxt/static 的使用方法。
- 将
nuxt generate命令添加到package.json文件的 scripts 中，如下所示：
-
---------- -
------ -------
-------- ----- -------
-------- ----- -------
----------- ----- ---------
-
-这样我们就可以通过 npm run generate 命令来生成静态页面了。
- 配置 nuxt.config.js 文件，设置成 static 模式：
------ ------- - ----- ------ ------- --------- -- --- -
- 在页面组件中使用 asyncData 函数：
------ ------- -
----- ----------- ------- ------ -- -
----- ---- - ----- --------------------------------------
------ - ---- -
--
-在服务端渲染(SSR)模式下，Nuxt.js 会自动调用 asyncData 函数，并等待所有异步数据获取完成之后再返回 HTML字符串；在 SPA 模式下，Nuxt.js 会在初次渲染时调用 asyncData 函数。
- 开始生成静态页面，我们可以通过以下命令启动 nuxt generate：
--- --- --------
生成的静态网站文件位于 ./dist 目录中。
使用 @nuxt/static 的意义
- 可以快速地生成静态网站，避免手动编写静态页面的麻烦。
- 可以为搜索引擎优化(SEO)，使得搜索引擎更容易抓取网站内容。
- 可以有效提升页面加载速度，提高用户体验。
- 可以更好地支持服务端渲染(SSR)模式。
示例代码
----------
-----
------ ---------- -------
----- --------- ------
------
-----------
--------
------ ------- -
----- ----------- ------- ------ -- -
----- ---- - ----- --------------------------------------
------ - ---- -
--
-
---------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f0a68ca403f2923b035c092