• NuxtJS项目——命令和部署


      一、命令

      (1)常用命令

    命令 描述
    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)。

      (2)常见参数

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

      (3)配置命令

      将命令添加至 package.json文件:

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

      (4)运行命令

      通过 npm run <command> 来执行相应的命令。如: npm run dev

      二、部署

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

      (1)服务端渲染应用部署

      部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令,而应该先进行编译构建,然后再启动 Nuxt 服务。

      建议将 .nuxt 加入 .npmignore 和 .gitignore 文件中。

      (2)静态应用部署

      Nuxt.js 可依据路由配置将应用静态化,使得我们可以将应用部署至任何一个静态站点主机服务商。npm run generate命令生成应用的静态目录和文件,这个命令会创建一个 dist 文件夹,所有静态化后的资源文件均在其中。此外,generate也支持动态路由。

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

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

      nuxt generate 在 build/generate 时间内仍然需要SSR引擎,同时具有预渲染所有页面的优势,并具有较高的SEO优化和页面加载能力。内容在构建时生成。使用时启用SPA模式 mode: 'spa' 或 --spa,并且我们运行打包,生成在导报后自动启动,生成包含常见的meta和资源链接,但不包含页面内容。

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

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

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

  • 相关阅读:
    boostrapvalidator
    bootstrap 整理
    emil 的使用
    sass笔记
    sql 语句的优化
    多线程笔记
    mysql笔记
    react
    优雅的创建map/list集合
    spring中路径的注入
  • 原文地址:https://www.cnblogs.com/bien94/p/12591226.html
Copyright © 2020-2023  润新知