你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。
本教程介绍如何将 Nuxt 3 应用程序部署到 Azure Static Web Apps。 Nuxt 3 支持 通用（客户端和服务器端）呈现，包括服务器和 API 路由。 如果没有额外的配置，可以将具有通用呈现的 Nuxt 3 应用部署到 Azure 静态 Web 应用。 在使用静态 Web 应用 GitHub 操作或 Azure Pipelines 任务构建应用时，Nuxt 3 会自动将其转换为静态资源和与 Azure 静态 Web 应用兼容的 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 静态 Web 应用资源并将其配置为从 GitHub 部署应用。
创建 Azure 静态 Web 应用资源
导航到 Azure 门户。
选择“ 创建资源”。
搜索 静态 Web 应用。
选择 “静态 Web 应用”。
选择 创建。
在“基本信息”选项卡中，输入以下值。
资产 价值 Subscription Azure 订阅名称。 资源组 my-nuxtjs-group 名称 my-nuxt3-app 计划类型 免费 Azure Functions API 和过渡环境的区域 选择离你最近的区域。 来源 GitHub 选择“使用 GitHub 登录”，然后向 GitHub 进行身份验证。
输入以下 GitHub 值。
资产 价值 组织 选择所需的 GitHub 组织。 Repository 选择之前创建的存储库。 分支 选择main。 在“生成详细信息”部分，从“生成预设”下拉列表中选择“自定义”，并保留默认值。
在 “应用位置”中，框内输入 /。
在“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 静态 Web 应用 Nuxt 3 部署预设 文档。