Nuxt 应用程序可以部署在 Node.js 服务器上,也可以预渲染用于静态主机,或者部署到无服务器或边缘(CDN)环境中。
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的区别
nuxt build
: 这个命令用于执行应用程序的构建过程。它会编译和打包应用程序的所有 Vue 组件、JavaScript 文件、样式表等资源,并生成用于客户端渲染的 JavaScript bundle 文件。执行nuxt build
后,你可以使用nuxt start
命令启动服务器,或者使用nuxt export
将构建好的应用导出为静态站点。但是,nuxt build
不会执行静态站点的生成过程。nuxt generate
: 这个命令用于生成静态站点。它会执行整个应用程序的构建过程,然后将生成的页面渲染成静态 HTML 文件。这些静态文件可以在任何静态服务器上进行托管,而不需要运行服务器端代码。执行nuxt generate
后,你将获得一个包含所有页面的纯静态站点,无需服务器端渲染。这对于 SEO 和性能优化非常有用。
因此,主要区别在于:
nuxt build
用于构建应用程序,但不会生成静态站点。nuxt generate
用于生成静态站点,包括执行整个构建过程并将页面渲染成静态 HTML 文件。