返回介绍

开场白

开始使用

API

配置

部署

其他

命令

发布于 2019-12-01 05:33:27 字数 3459 浏览 1061 评论 0 收藏 0

Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署。

命令列表

命令描述
nuxt启动一个热加载的Web服务器(开发模式) localhost:3000。
nuxt build利用webpack编译应用,压缩JS和CSS资源(发布用)。
nuxt start以生产模式启动一个Web服务器 (需要先执行nuxt build)。
nuxt generate编译应用,并依据路由配置生成对应的HTML文件 (用于静态站点的部署)。

如果使用了 Koa/Express 等 Node.js Web 开发框架,并使用了 Nuxt 作为中间件,可以自定义 Web 服务器的启动入口:

命令描述
NODE_ENV=development nodemon server/index.js启动一个热加载的自定义 Web 服务器(开发模式)。
NODE_ENV=production node server/index.js以生产模式启动一个自定义 Web 服务器 (需要先执行 nuxt build)。

参数

您可以使用 --help 命令来获取详细用法。常见的命令有:

  • --config-file-c: 指定 nuxt.config.js 的文件路径。
  • --spa-s: 禁用服务器端渲染,使用SPA模式
  • --unix-socket-n: 指定UNIX Socket的路径。

你可以将这些命令添加至 package.json

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

这样你可以通过 npm run <command> 来执行相应的命令。如: npm run dev

提示: 要将参数传递给npm命令,您需要一个额外的--脚本名称(例如:npm run dev --参数 --spa)

开发模式

可通过以下命令以开发模式启动带热加载特性的 Nuxt 服务:

nuxt
// 或
npm run dev

发布部署

Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署。

服务端渲染应用部署

部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令,而应该先进行编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成:

nuxt build
nuxt start

推荐的 package.json 配置如下:

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
}

提示: 建议将 .nuxt 加入 .npmignore.gitignore 文件中。

静态应用部署

Nuxt.js 可依据路由配置将应用静态化,使得我们可以将应用部署至任何一个静态站点主机服务商。

可利用下面的命令生成应用的静态目录和文件:

npm run generate

这个命令会创建一个 dist 文件夹,所有静态化后的资源文件均在其中。

如果你的项目需要用到动态路由,请移步 generate配置API 了解如何让 Nuxt.js 生成此类动态路由的静态文件。

注意:使用 nuxt generate 静态化应用的时候, 传给 asyncData() 和 fetch() 方法的上下文对象 不会包含 reqres 两个属性。

单页面应用程序部署 (SPA)

nuxt generate 在 build/generate 时间内仍然需要SSR引擎,同时具有预渲染所有页面的优势,并具有较高的SEO优化和页面加载能力。 内容在构建时生成。例如,我们不能将它用于内容依赖于用户身份验证或实时API的应用程序(至少对于第一次加载)。

SPA应用的想法很简单! 使用时启用SPA模式 mode: 'spa'--spa,并且我们运行打包,生成在导报后自动启动,生成包含常见的meta和资源链接,但不包含页面内容。

因此,对于SPA部署,您必须执行以下操作:

  • nuxt.config.js中的mode更改为spa
  • 运行 npm run build.
  • 自动生成dist/文件夹,部署到您的服务器,如Surge,GitHub Pages或nginx。

另一种可能的部署方法是在spa模式下将Nuxt用作框架中的中间件。这有助于减少服务器负载,并在无法进行SSR的项目中使用Nuxt。

请参考 如何在 Heroku 上部署? 来查看更多部署信息。

请参考 如何在 GitHub Pages 上部署? 查看如何部署到GitHub页面的更多详细信息。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文