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

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

举个简单例子

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

package.json代码片段 

 "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 文件

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

安装pm2 

全局安装pm2管理工具

$ npm install pm2@latest -g
# or
$ yarn global add pm2

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

在项目根目录,终端执行 

# 选项 --attach :启动并查看日志$ pm2 start ecosystem.config.cjs --attach# 通过 Ctrl-C 退出时,应用程序仍将在后台运行。

(执行结果 )

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

重启

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

# 重新启动应用程序:$ pm2 restart MyNuxtWeb# 重新启动所有应用程序:$ pm2 restart all# 重新启动多个应用程序:$ pm2 restart MyNuxtWeb MyNuxtWeb2 MyNuxtWeb3

(重启效果)

(日志输出)

停止

# 停止指定的应用程序
$ pm2 stop MyNuxtWeb
$ pm2 stop [process_id]# 停止所有
$ pm2 stop all# 停止多个应用程序:
$ pm2 stop MyNuxtWeb1 MyNuxtWeb2 MyNuxtWeb3

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

删除

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

# 删除应用程序$ pm2 delete MyNuxtWeb# 删除全部$ pm2 delete all

(删除进程)

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

将PM2连接到pm2.io运行

Server连接方式

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

(pm2.io视图界面)

AWS连接方式

在package.json添加以下代码

"scripts": {"prod:start": "pm2-runtime ecosystem.config.cjs"
}

在.env添加一下代码

# 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功能非常强大,有兴趣的可以到官方了解详情。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/660649.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

吴恩达深度学习笔记:深度学习的 实践层面 (Practical aspects of Deep Learning)1.11-1.12

目录 第二门课: 改善深层神经网络:超参数调试、正 则 化 以 及 优 化 (Improving Deep Neural Networks:Hyperparameter tuning, Regularization and Optimization)第一周:深度学习的 实践层面 (Practical aspects of Deep Learning)1.11 神经网络的权重…

【记录】Python3| 将 PDF 转换成 HTML/XML(✅⭐pdfminer.six)

本文将会被汇总至 【记录】Python3|2024年 PDF 转 XML 或 HTML 的第三方库的使用方式、测评过程以及对比结果(汇总),更多其他工具请访问该文章查看。 注意!pdfminer.six 和 pdfminer3k 不是同一个!&#xf…

区块链 | 由外部实体导致的 NFT 安全问题

🦊原文: Understanding Security Issues in the NFT Ecosystem 🦊警告: 本文只记录了原文的第 6 节。 1 问题描述 NFT 所指向的数字资产(图片、视频等)必须是可以访问的,这样 NFT 才具有意义…

Threejs制作服务器机房冷却结构

这节再绘制一个机房的结构,因为内容比较简单,就只使用一个章节来介绍, 先来一张效果图, 需要两个模型:一个冷却设备,一个服务器机箱,我这里是从网上找来的,首先我们搭建一个场景&a…

k8s环境prometheus operator监控集群外资源

文章目录 k8s环境添加其他节点基于prometheus operator k8s环境prometheus operator添加node-exporter方式一:通过 ServiceMonitor 方式可以写多个监控node节点运行 external-node.yaml查看资源有没有被创建热更新 外部需要被监控服务器安装 node-exporterdocker 方…

Stm32CubeMX 为 stm32mp135d 添加网卡 eth

Stm32CubeMX 为 stm32mp135d 添加网卡 eth 一、启用设备1. eth 设备添加2. eth 引脚配置2. eth 时钟配置 二、 生成代码1. optee 配置2. uboot 配置3. linux 配置 bringup 可参考:Stm32CubeMX 生成设备树 一、启用设备 1. eth 设备添加 我这里只启用一个eth设备&…

关于下载上传的sheetjs

一、背景 需要讲后端返回来的表格数据通过前端设置导出其中某些字段,而且得是xlsx格式的。 那就考虑使用控件SheetJS。如果是几年前,一般来说,保存excel的文件都是后端去处理,处理完成给前端一个接口,前端调用了打开…

Postgresql源码(127)投影ExecProject的表达式执行分析

无论是投影还是别的计算,表达式执行的入口和计算逻辑都是统一的,这里已投影为分析表达式执行的流程。 1 投影函数 用例 create table t1(i int primary key, j int, k int); insert into t1 select i, i % 10, i % 100 from generate_series(1,1000000…

国家开放大学2024年春《Matlab语言及其应用》实验五Simulink系统 建模与仿真参考答案

答案:更多答案,请关注【电大搜题】微信公众号 答案:更多答案,请关注【电大搜题】微信公众号 答案:更多答案,请关注【电大搜题】微信公众号 实验报告 姓名: 学号: 实验五名称…

数据挖掘之基于Lightgbm等多模型消融实验的信用欺诈检测实现

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 在当前的金融环境中,信用欺诈行为日益增多,给金融机构和消费者带来了巨大的损…

基于语音识别的智能电子病历(一)

引子 A:“上周开年会了!” 俺:“有啥新的动向?” A:“今年计划开发基于语音识别的智能电子病历。老板说这个算是国内首创!” 俺:“嗯,俺做这个20多年了。” A:“语言…

电脑装了两个Win10系统,怎么修改其名称方便识别?

前言 有小伙伴在上一期的双系统教程上留言说怎么修改双系统引导时候显示的名称 不然看起来两个系统好像都没啥分别,如果是Windows10Windows11的方案还好说,但如果是两个Windows10或者是两个Windows11,有时候还真的很不好分辨。 万一想要启动…