Nuxt 3各种构建方式的探索

VueNuxt

2024年02月23日 16:44:338053

//cdn.shiniest.cn/static/202402/nuxt3.png

Nuxt 应用程序可以部署在 Node.js 服务器上,也可以预渲染用于静态主机,或者部署到无服务器或边缘(CDN)环境中。

—Nuxt 官网

Node.js服务器

使用 Nitro 的 Node.js 服务器预设,可以在任何 Node 主机上部署。

  • 如果未指定或自动检测到任何输出格式,则默认输出格式

  • 仅加载所需的块以在请求时进行渲染,以实现最佳的冷启动时间

  • 非常适用于将 Nuxt 应用程序部署到任何 Node.js 主机。

npm run build

挡在控制台运行此命令时,会在.output文件夹内生成一个准备就绪的 Node 服务器。

node .output/server/index.mjs

这将启动您的生产环境 Nuxt 服务器,默认监听端口为 3000。

如果需要改变启动PORT和HOST,可以通过设定环境变量达到目的:

#项目根目录下创建.env文件
PORT=8080
HOST=0.0.0.0

也可以使用PM2(Process Manager 2)

//项目根目录下创建ecosystem.config.cjs文件
module.exports = {
  apps: [
    {
      name: 'YourAPP',
      port: '8080',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs'
    }
  ]
}

静态资源服务器

npm run generate

这样的应用程序是静态的,不需要服务器端渲染。在构建时,Nuxt.js 会生成静态的 HTML 文件,其中包含了每个页面的内容。当用户访问这些静态页面时,服务器只需简单地提供相应的静态文件,而不需要执行渲染操作。因此,这种情况下,服务器的性能消耗会大大降低,因为它只是简单地提供静态文件,不需要执行额外的计算或处理。

客户端渲染

如果您不想预渲染您的路由,另一种使用静态主机的方式是在 nuxt.config 文件中将 ssr 属性设置为 false。然后,nuxt generate 命令将输出一个 .output/public/index.html 入口点和 JavaScript 捆绑包,就像一个经典的客户端 Vue.js 应用程序一样。

//nuxt.config.ts
export default defineNuxtConfig({
  ssr: false
})

nuxt build和nuxt generator的区别

  1. nuxt build: 这个命令用于执行应用程序的构建过程。它会编译和打包应用程序的所有 Vue 组件、JavaScript 文件、样式表等资源,并生成用于客户端渲染的 JavaScript bundle 文件。执行 nuxt build 后,你可以使用 nuxt start 命令启动服务器,或者使用 nuxt export 将构建好的应用导出为静态站点。但是,nuxt build 不会执行静态站点的生成过程。

  2. nuxt generate: 这个命令用于生成静态站点。它会执行整个应用程序的构建过程,然后将生成的页面渲染成静态 HTML 文件。这些静态文件可以在任何静态服务器上进行托管,而不需要运行服务器端代码。执行 nuxt generate 后,你将获得一个包含所有页面的纯静态站点,无需服务器端渲染。这对于 SEO 和性能优化非常有用。

因此,主要区别在于:

  • nuxt build 用于构建应用程序,但不会生成静态站点。

  • nuxt generate 用于生成静态站点,包括执行整个构建过程并将页面渲染成静态 HTML 文件。

赞 7
收藏
分享

本作品系 原创,作者:你不熟悉的x先生

原文链接:https://shiniest.cn/blog/article/163

文本版权:文本版权归作者所有

转载需著名并注明出处(禁止商业使用)

评论和回复

0/500
    没有更多啦~
    怎么一条数据都没有呢?
简介
Nuxt 应用程序可以部署在 Node.js 服务器上,也可以预渲染用于静态主机,或者部署到无服务器或边缘(CDN)环境中。
目录
推荐阅读

D&D By x先生 With ♥