Nuxt 3各种构建方式的探索

VueNuxt

2024年02月23日 16:44:334363

//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 文件。

赞 4
收藏
分享

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

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

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

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

评论和回复

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

D&D By x先生 With