在Netlify上部署Nuxt

部署到Netlify是一个低摩擦的选择得到一个静态生成Nuxt.js网站快速在线。

流程的核心利用nuxt生成(<= v2.12)命令在部署期间构建一个静态版本的Nuxt.js应用程序到经销目录中。然后将此目录的内容部署到生产URL。

开始

按下“Git的新站点”按钮。使用存储库主机进行身份验证,选择要部署的存储库,然后继续。你应该停在第三步:“构建选项,然后部署!”

配置:

用于静态生成的站点

确保你有目标:“静态”在你的nuxt.config

  1. 分支机构部署:主要,或您喜欢的任何分支
  2. 构建命令:npm运行生成
  3. 发布目录:经销

仅用于客户端渲染

确保你有目标:“静态”ssr:假在你的nuxt.config

  1. 分支机构部署:主要,或您喜欢的任何分支
  2. 构建命令:npm运行生成
  3. 发布目录:经销

对于客户端呈现,Netlify网站重定向到的默认刷新存在问题“404 not found”.对于任何未生成的页面,它们将退回到SPA模式,然后如果您刷新或共享该链接,您将获得Netlify的404页面。这是因为没有生成的页面实际上并不存在,因为它们实际上是一个单一的页面应用程序,所以如果你刷新这个页面,你会得到一个404,因为这个页面的url实际上并不存在。通过重定向到404.html, Nuxt将在SPA回退中正确地重新加载页面。

解决这个问题最简单的方法就是加a生成属性在你的nuxt.config和设置回退:真.然后,当处于SPA模式时,它将回退到生成的404.html,而不是Netlify的404页面。

出口默认的生成回退真正的

如果你想自动应用头文件和重定向的应用程序,那么有一个模块,这是特别有用的,当你有自定义头文件/重定向(在_headers或_redirects文件):

netlify-files-module

有关Netlify重定向的更多信息,请参见Netlify文档

关于Netlify重定向的简单参考,请阅读博客万博全站客户端app帖子由迪Sasidharan

可以通过。添加其他ENV变量“高级”按钮。这对于交换可选API凭据等很有帮助。Netlify也提供了一个默认ENV变量它可以在构建时被你的Nuxt.js应用程序读取。

点击“部署网站”立即触发部署。您的Netlify站点将被分配一个随机URL并使用nuxt生成命令。

瞧!您的Nuxt.js应用程序现在托管在Netlify上!

贡献者

发现了一个错误或者想要对文档做出贡献?在GitHub上编辑此页面!