在 Netlify 上部署 Nuxt

如何将 Nuxt 部署到 Netlify？

部署到 Netlify 是将静态生成的 Nuxt 站点快速上线的无摩擦选项。

该流程在部署时使用 nuxt generate（<= v2.12）命令，将 Nuxt 应用的静态版本构建到 dist 目录。该目录的内容将被部署到生产 URL。

开始

点击 Netlify 控制台中的 "New site from Git" 按钮。通过您的代码仓库托管服务进行身份验证，选择要部署的仓库，然后继续。您将看到步骤 3 "Build options, and deploy!"。

配置：

静态生成站点

确保 nuxt.config 中有 target: 'static'。

1. 部署分支： main 或任意分支
2. 构建命令： npm run generate
3. 发布目录： dist

仅客户端渲染

确保 nuxt.config 中有 target: 'static' 和 ssr: false。

1. 部署分支： main 或任意分支
2. 构建命令： npm run generate
3. 发布目录： dist

对于客户端渲染，Netlify 默认会将站点重定向到 "404 not found"，导致刷新时出现问题。未生成的页面将回退到 SPA 模式，刷新或分享链接时会显示 Netlify 的 404 页面。这是因为未生成的页面实际上不存在，而这实际上是一个单页应用，刷新该页面时，该 URL 实际上不存在，因此会显示 404。通过重定向到 404.html，Nuxt 将在 SPA 回退中正确重新加载页面。

解决此问题最简单的方法是在 nuxt.config 中添加 generate 属性 并设置 fallback: true。这样在 SPA 模式下，将回退到生成的 404.html 而不是 Netlify 的 404 页面。

export default {
  generate: {
    fallback: true
  }
}

但是，如果您想自动应用应用程序的头部和重定向，有一个模块可以实现。这在使用自定义头部/重定向（_headers 或 _redirects 文件）时特别有用：

netlify-files-module

有关 Netlify 重定向的更多信息，请参阅 Netlify 文档 。

有关 Netlify 重定向的简单参考，请参阅 Divya Sasidharan 的博客文章 。

可选地，您可以通过 "Advanced" 按钮添加环境变量。这些对于替换不同的 API 凭据等很有用。Netlify 还提供了默认环境变量 ，Nuxt 应用程序可以在构建时读取这些变量。

点击 "Deploy site" 后，部署将立即开始。您的 Netlify 站点将被分配一个随机 URL，并使用 nuxt generate 命令进行部署。

就这样！您的 Nuxt 应用程序现在托管在 Netlify 上了！