Vue.js 作為一款前端框架，它不僅可以在網頁中直接渲染頁面，還可以在服務器端通過構建打包工具進行生成靜態 html 文件。

生成靜態 html 文件的好處是可以提高網站的搜索引擎優化，降低第一次訪問網站的延遲時間和帶寬消耗。接下來就讓我們來了解 Vue 中如何生成靜態 html 文件。

第一步，需要先安裝 Vue 的官方命令行工具 Vue CLI（如果還沒有安裝的話）。安裝命令為：

npm install -g vue-cli

第二步，通過 Vue CLI 創建一個新項目。在控制臺中執行以下命令：

vue create my-project

my-project 就是一個新的項目名，可以根據自己的需要修改。

第三步，進入到 my-project 文件夾中，安裝 Vue 的靜態網站生成工具（Vuepress）。安裝命令為：

npm install -D vuepress

第四步，創建一個 markdown 文件（例如 index.md），并在文件中編寫頁面內容。

第五步，創建一個 .vuepress 文件夾，并在其中創建 config.js 文件。config.js 中的內容如下：

module.exports = {
title: 'My Site', // 網站的標題
description: 'This is my site', // 網站的描述
themeConfig: { // 主題配置
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{ text: 'External', link: 'https://google.com' },
],
sidebar: [
'/',
'/guide/',
]
}
}

其中，nav 和 sidebar 是主題頁面導航的配置，可以根據自己的需要進行修改。

第六步，通過以下命令在本地啟動網站，查看生成的靜態 html 文件：

npx vuepress dev

第七步，執行以下命令構建生成靜態 html 文件：

npx vuepress build

之后靜態 html 文件就會生成在 .vuepress/dist 目錄下了。將這個目錄下的文件上傳到服務器上即可。

通過以上步驟，我們就可以成功生成 Vue 的靜態 html 文件了。與直接在網頁中渲染不同，這種方式生成的頁面在搜索引擎中更容易被查找到，也更加方便被搜索引擎爬蟲抓取。此外，生成靜態 html 頁面的請求響應速度也會更快，從而提升了用戶的體驗。