Want to take a look at our new docs? Our new docs are now in beta. Have fun!

命令

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 页面的更多详细信息。

Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us