nuxt3项目服务端bulid后在本地浏览的3种方式(nuxi preview、Node.js Server、PM2)

你也许会问有了开发调试本地浏览,为什么还要服务端构建之后在本地浏览?

举个简单例子

在 Nuxt 3 服务端打包中,由于运行环境不同,无法直接访问 process 对象。服务端打包通常是在 Node.js 环境中进行的,而 process 对象是 Node.js 中的全局对象,但在浏览器端不可用。

package.json代码片段

javascript 复制代码
 "scripts": {
    "build": "nuxt build", # 构建
    "dev": "nuxt dev --host",
    "generate": "nuxt generate",
    "preview": "nuxt preview", # 构建后预览
    "postinstall": "nuxt prepare"
  },

nuxi preview 方式

项目构建(build)完成后,在终端执行 npm run preview

注意:如果你开启了pm2或本地开发调试(npm run dev)打开了记得关闭它们,因为它们可能占用3000端口。

当然你也可以调整端口号做区分,这样就不会与其他进程产生冲突了。具体请看nuxt3本地通过配置端口号区分不同预览方式-CSDN博客

执行npm run preview命令后出现下图的结果,这时候你就可以在浏览器打开 http://localhost:3000/ 进行浏览了 🎉

Node.js Server

正如图1所示,构建工具会告诉你,你打包后的启动资源放在了一个叫 .output/server文件夹里

构建目录如下图所示

在vscode新建终端,输入 node .\.output\server\index.mjs

..

这时候你就可以在浏览器打开 http://localhost:3000/ 进行浏览了 🎉

PM2

创建执行文件

在项目根目录创建 ecosystem.config.cjs 文件

javascript 复制代码
module.exports = {
  apps: [
    {
      name: 'MyNuxtWeb', # 应用名称
      port: '3000', # 端口号
      exec_mode: 'cluster', # 设置为cluster让 PM2 知道您想要在每个实例之间进行负载平衡
      instances: '1', # 1 意味着 PM2 可用 CPU 的数量
      script: './.output/server/index.mjs' # 命令名称
    }
  ]
}

安装pm2

全局安装pm2管理工具

bash 复制代码
$ npm install pm2@latest -g
# or
$ yarn global add pm2

启动pm2管理工具,并查看日志

在项目根目录,终端执行

bash 复制代码
# 选项 --attach :启动并查看日志

$ pm2 start ecosystem.config.cjs --attach

# 通过 Ctrl-C 退出时,应用程序仍将在后台运行。

(执行结果 )

这时候你就可以在浏览器打开 http://localhost:3000/ 进行浏览了 🎉

重启

如果日志报错导致项目无法运行,可以重启

bash 复制代码
# 重新启动应用程序:

$ pm2 restart MyNuxtWeb

# 重新启动所有应用程序:

$ pm2 restart all

# 重新启动多个应用程序:

$ pm2 restart MyNuxtWeb MyNuxtWeb2 MyNuxtWeb3

(重启效果)

(日志输出)

停止

bash 复制代码
# 停止指定的应用程序
$ pm2 stop MyNuxtWeb
$ pm2 stop [process_id]

# 停止所有
$ pm2 stop all

# 停止多个应用程序:
$ pm2 stop MyNuxtWeb1 MyNuxtWeb2 MyNuxtWeb3

(根据进程id进行停止操作)

删除

如果你刚开始不小心给instances设置成max,你可能需要删除一些。😂

bash 复制代码
# 删除应用程序

$ pm2 delete MyNuxtWeb

# 删除全部

$ pm2 delete all

(删除进程)

如果你同时打开了日志视图,可以发现日志进程也被终结了。

将PM2连接到pm2.io运行

Server连接方式

(输入pm2.io提供的公钥和密钥)

(pm2.io视图界面)

AWS连接方式

在package.json添加以下代码

javascript 复制代码
"scripts": {
  "prod:start": "pm2-runtime ecosystem.config.cjs"
}

在.env添加一下代码

javascript 复制代码
# pm2.io 公钥
PM2_PUBLIC_KEY= pm2.io公钥

# pm2.io  密钥
PM2_SECRET_KEY= pm2.io密钥

在终端执行 npm run prod:start

如果你提前开好窗口进行对比,你会发现

启动 prod:start 命令前

启动prod:start命令后

以上就是nuxt3项目构建后在本地浏览的3种方式。

pm2.io功能非常强大,有兴趣的可以到官方了解详情。

相关推荐
Bug从此不上门13 天前
Nuxt3之使用lighthouse性能测试及性能优化实操
前端·javascript·性能优化·vue·fetch·nuxt3
Bessie23414 天前
实现 Nuxt3 预览PDF文件
pdf·vue3·nuxt3
夏河始溢14 天前
一七八、Node.js PM2使用介绍
前端·javascript·node.js·pm2
Bessie23422 天前
实现Vue3/Nuxt3 预览excel文件
javascript·excel·vue3·nuxt3
午与羽2 个月前
Nestjs构建Certeasy证书自动化平台 - 系统部署
运维·docker·pm2
Amd7942 个月前
使用 Nuxt Kit 检查模块与 Nuxt 版本兼容性
模块·nuxt·兼容性·版本·nuxt3·nuxt2·检查
Amd7943 个月前
使用 reloadNuxtApp 强制刷新 Nuxt 应用
状态管理·nuxt3·强制刷新·组件交互·缓存控制·路径导航·页面重载
Amd7943 个月前
使用 refreshNuxtData 刷新 Nuxt应用 中的数据
nuxt3·usefetch·手动刷新·useasyncdata·缓存失效·页面更新·数据刷新
朝阳393 个月前
Nuxt3【组件】2024最新版(含异步组件、动态组件、客户端组件、内置组件、添加组件库等)
nuxt3
Amd7943 个月前
使用 preloadComponents 进行组件预加载
web·开发·组件·性能·nuxt3·预加载·vuejs