前端开发中，我们通常会将页面代码编写为静态页面，然后上传到服务器，用户通过访问服务器上的静态页面来访问我们的网站。但是，如果我们的网站内容比较丰富，页面数量较多，频繁手动编写静态页面不仅费时费力，而且容易出错。因此，我们需要一个快速生成静态页面的工具。这时，@nuxt/static 可以帮助我们解决这个问题。
什么是 @nuxt/static
@nuxt/static 是一个 npm 包，可以通过它快速地将 Nuxt.js 应用程序转换为无需服务器端运行的静态网站，支持 SPA（单页面应用）和服务端渲染(SSR)模式。@nuxt/static 提供了一个命令行工具 nuxt generate，可以根据 Nuxt.js 应用程序生成静态页面。
如何使用 @nuxt/static
安装 @nuxt/static
我们在使用 @nuxt/static 之前需要先安装它，可以通过 npm 进行安装，命令如下：
npm install @nuxt/static
或者，我们在创建 Nuxt.js 项目时可以选择使用 @nuxt/static，命令如下：
npx create-nuxt-app <project-name>
然后选择以下选项：
- 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 中，如下所示：
{
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
}
}这样我们就可以通过 npm run generate 命令来生成静态页面了。
- 配置 nuxt.config.js 文件，设置成 static 模式：
export default {
mode: 'spa',
target: 'static',
// ...
}- 在页面组件中使用 asyncData 函数：
export default {
async asyncData({ params, $axios }) {
const post = await $axios.$get(`/api/posts/${params.id}`)
return { post }
},
}在服务端渲染(SSR)模式下，Nuxt.js 会自动调用 asyncData 函数，并等待所有异步数据获取完成之后再返回 HTML字符串；在 SPA 模式下，Nuxt.js 会在初次渲染时调用 asyncData 函数。
- 开始生成静态页面，我们可以通过以下命令启动 nuxt generate：
npm run generate
生成的静态网站文件位于 ./dist 目录中。
使用 @nuxt/static 的意义
- 可以快速地生成静态网站，避免手动编写静态页面的麻烦。
- 可以为搜索引擎优化(SEO)，使得搜索引擎更容易抓取网站内容。
- 可以有效提升页面加载速度，提高用户体验。
- 可以更好地支持服务端渲染(SSR)模式。
示例代码
-- -------------------- ---- -------
----------
-----
------ ---------- -------
----- --------- ------
------
-----------
--------
------ ------- -
----- ----------- ------- ------ -- -
----- ---- - ----- --------------------------------------
------ - ---- -
--
-
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0a68ca403f2923b035c092