命令与部署

Nuxt 提供了一套对开发和生产都有用的命令。

使用 package.json

这些命令需要写入 package.json：

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

然后可以通过 yarn <command> 或 npm run <command> 运行命令（例如：yarn dev / npm run dev）。

开发环境

要以开发模式启动 Nuxt，并在 http://localhost:3000 上启用热模块替换 ，运行：

yarn dev

npm run dev

命令列表

根据目标 可以运行不同的命令：

target: server（默认值）

• nuxt dev - 启动开发服务器。
• nuxt build - 使用 webpack 为生产环境构建和优化应用程序。
• nuxt start - 启动生产服务器（运行 nuxt build 之后）。用于 Heroku、Digital Ocean 等 Node.js 托管。

target: static

• nuxt dev - 启动开发服务器。
• nuxt generate - 构建应用程序（如需要），将所有路由生成为 HTML 文件，并静态导出到 dist/ 目录（用于静态托管）。
• nuxt start - 像静态托管（Netlify、Vercel、Surge 等）一样提供 dist/ 目录。非常适合部署前的测试。

检查 Webpack 配置

类似于 vue inspect ，可以检查 nuxt 构建项目时使用的 webpack 配置。

• nuxt webpack query...

参数：

• --name：要检查的包名称（client、server、modern）
• --dev：检查开发环境的 webpack 配置
• --depth：检查深度，默认为 2 以避免冗长输出
• --no-colors：禁用 ANSI 颜色（TTY 不可用或管道到文件时默认禁用）

示例：

• nuxt webpack
• nuxt webpack devtool
• nuxt webpack resolve alias
• nuxt webpack module rules
• nuxt webpack module rules test=.jsx
• nuxt webpack module rules test=.pug oneOf use.0=raw
• nuxt webpack plugins constructor.name=WebpackBar options reporter
• nuxt webpack module rules loader=vue-
• nuxt webpack module rules "loader=.*-loader"

生产部署

Nuxt 支持服务器部署和静态部署两种方式。

服务器部署

使用默认值 target: 'server' 部署 SSR 应用程序。

yarn build

npm run build

Nuxt 将创建包含所有内容的 .nuxt 目录，可以部署到托管服务器。

应用程序构建完成后，可以使用 start 命令查看生产版本：

yarn start

npm run start

静态部署（预渲染）

Nuxt 可以在任何静态托管上托管 Web 应用程序。

确保 nuxt.config.js 中有 target: 'static'（Nuxt v2.13 及以上）：

export default {
  target: 'static'
}

yarn generate

npm run generate

Nuxt 将创建包含所有内容的 dist/ 目录，可以部署到静态托管服务。

Nuxt v2.13 安装了爬虫，会爬取链接标签，并在使用 nuxt generate 命令时根据这些链接生成路由。

出错时失败（Fail on Error）

要在页面出错时返回非零状态码，从而使 CI/CD 部署或构建失败，请使用 --fail-on-error 参数：

yarn generate --fail-on-error

npm run generate --fail-on-error

接下来？