• 命令
    • 命令列表
      • 参数
  • 开发模式
  • 发布部署
    • 服务端渲染应用部署
    • 静态应用部署
    • 单页面应用程序部署 (SPA)

    命令

    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
    1. "scripts": {
    2. "dev": "nuxt",
    3. "build": "nuxt build",
    4. "start": "nuxt start",
    5. "generate": "nuxt generate"
    6. }

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

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

    开发模式

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

    1. nuxt
    2. // 或
    3. npm run dev

    发布部署

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

    服务端渲染应用部署

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

    1. nuxt build
    2. nuxt start

    推荐的 package.json 配置如下:

    1. {
    2. "name": "my-app",
    3. "dependencies": {
    4. "nuxt": "latest"
    5. },
    6. "scripts": {
    7. "dev": "nuxt",
    8. "build": "nuxt build",
    9. "start": "nuxt start"
    10. }
    11. }

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

    静态应用部署

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

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

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