你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。
在 Azure Static Web Apps 上部署具有通用呈现功能的 Nuxt 3 站点
本教程介绍如何将 Nuxt 3 应用程序部署到 Azure Static Web Apps。 Nuxt 3 支持通用（客户端和服务器端）呈现（包括服务器和 API 路由）。 不需额外配置即可将具有通用呈现功能的 Nuxt 3 应用部署到 Azure Static Web Apps。 在 Static Web Apps GitHub Action 或 Azure Pipelines 任务中生成应用时，Nuxt 3 会自动将其转换为与 Azure Static Web Apps 兼容的静态资产和 Azure Functions 应用。
先决条件
设置 Nuxt 3 应用
可以使用 npx nuxi init nuxt-app 设置新的 Nuxt 项目。 本教程不使用新项目，而是使用设置的现有存储库来演示如何在 Azure Static Web Apps 上部署具有通用呈现功能的 Nuxt 3 站点。
将存储库命名为 nuxt-3-starter。
接下来，将新存储库克隆到计算机。 确保将 <YOUR_GITHUB_ACCOUNT_NAME> 替换为你的帐户名称。
git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter导航到新克隆的 Nuxt.js 应用：
cd nuxt-3-starter安装依赖项：
npm install在开发环境中启动 Nuxt.js 应用：
npm run dev -- -o
导航到 http://localhost:3000 以打开应用，你在此处应会看到首选浏览器中将会打开以下网站。 选择按钮以调用服务器和 API 路由。
部署 Nuxt 3 站点
以下步骤演示了如何创建 Azure Static Web Apps 资源并将其配置为从 GitHub 部署应用。
创建 Azure Static Web Apps 资源
导航到 Azure 门户。
选择“创建资源”。
搜索“静态 Web 应用”。
选择“静态 Web 应用”。
选择“创建”。
在“基本信息”选项卡上，输入下列值。
属性 值 订阅 Azure 订阅名称。 资源组 my-nuxtjs-group 名称 my-nuxt3-app 计划类型 免费 Azure Functions API 和过渡环境的区域 选择离你最近的区域。 Source GitHub 选择“使用 GitHub 登录”，然后向 GitHub 进行身份验证。
输入以下 GitHub 值。
属性 值 组织 选择所需的 GitHub 组织。 存储库 选择之前创建的存储库。 分支 选择“主要”。 在“生成详细信息”部分，从“生成预设”下拉列表中选择“自定义”，并保留默认值 。
在“应用位置”框中输入“/”。
在“API 位置”框中输入“.output/server”。
在“输出位置”框中输入“.output/public”。
查看 + 创建
选择“查看 + 创建”，以验证详细信息是否全部正确。
选择“创建”，开始创建静态 Web 应用并为部署预配 GitHub Actions。
部署完成后，请选择“转到资源”。
在“概述”窗口中，选择 URL 链接，打开已部署的应用程序。
如果网站并未立即加载，则后台 GitHub Actions 工作流仍在运行。 工作流完成后，可以刷新浏览器以查看 Web 应用。
可以通过导航到存储库的 Actions 来检查 Actions 工作流的状态：
https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions
同步更改
创建应用后，Azure 静态 Web 应用在存储库中创建了 GitHub Actions 工作流文件。 返回到终端并运行以下命令，以拉取包含新文件的提交。
git pull
通过更新代码并将其推送到 GitHub 来更改应用。 GitHub Actions 自动生成和部署应用。
有关详细信息，请参阅 Azure Static Web Apps Nuxt 3 部署预设文档。