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.mzph.cn/bicheng/5387.shtml

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

相关文章

GO语言核心30讲 进阶技术 (第二部分)

原站地址:Go语言核心36讲_Golang_Go语言-极客时间 一、接口类型的合理运用 1. 接口类型只包含方法,不包含字段。 方法集合就是它的全部特征。 任何数据类型,只要实现了接口的方法集合全部,那么它就是这个接口的实现类型 2. 怎么…

设计模式之代理模式ProxyPattern(六)

一、代理模式介绍 1、什么是代理模式? 代理模式是一种结构型设计模式,它允许为其他对象提供一个替代品或占位符,以控制对这个对象的访问。 2、代理模式的角色构成 抽象主题(Subject):定义了真实主题和代…

【java9】java9新特性之模块化

Java9模块化是Java9版本中引入的一个重要特性,通过Java Platform Module System (JPMS)实现。这个特性允许开发者将大型应用程序拆分成相互独立的模块,每个模块包含一组相关的功能和资源。 关键概念与语法 下面是Java9模块化的一些关键概念和语法&…

记一次使用Notepad++正则表达式批量替换SQL语句

目录 一、需求二、解决方案三、正则解析 一、需求 存在如下SQL建表脚本: CREATE TABLE "BUSINESS_GOODS" ( "ID" VARCHAR(32) NOT NULL, "GOODS_CODE" VARCHAR(50), "GOODS_NAME" VARCHAR(100), ... NOT CLUSTER PRIMARY…

selenium之document.querySelector()方法

document.querySelector()方法 1. 常用的三种获取元素的js方式 document.getElementById("");document.getElementsByClassName();document.getElementsByTagName(); var docdocument;var boxdoc.getElementById("box");var libox.getElementsByTagName(…

Ceph PG

概述 为了实现不同存储池之间的策略隔离,以及针对不同用途的存储池指定不同的容灾策略,ceph crush使用中间结构即Placement Group(后续均以PG简称)将应用数据对象进行映射后,写入OSD本地存储设备。PG也是我们日常运维…

常见的 HTML 标准

常见的 HTML 标准 常见的 HTML 标准发布历史 HTML(Hypertext Markup Language)有多个版本和标准。以下是一些常见的 HTML 标准: HTML 2.0:于1995年发布,是 HTML 的第一个正式标准。HTML 3.2:于1997年发布…

刷代码随想录有感(50):路径总和

题干: 代码; class Solution { public:bool traversal(TreeNode* node, int count){if(node NULL)return false;if(!node -> left && !node -> right && count 0)return true;if(!node -> left && !node -> right &&…

python挑战10秒小程序

目录 一.前言 二.代码 三.分析 一.前言 >1.小程序开始时,会出现一个倒计时器,从10秒开始。 >2.玩家需要集中注意力并估计10秒钟过去的时间。 >3.当玩家认为10秒钟已经过去时,需要点击屏幕上的按钮。 >4.小程序会显示玩家的点击时间,以及与实际10秒钟的时间…

wetrtc简介

WebRTC(Web Real-Time Communication)是一种实时通信技术,它允许网络应用或站点在无需中间媒介的情况下,直接在浏览器之间建立点对点(Peer-to-Peer)的连接,实现音频、视频流或其他任意数据的实时…

泰勒创造力达到顶峰?(上)

hello,大家好!今天看一篇经济学人的一篇评论,说的是泰勒斯威夫特当前的创造力。经济学人总是语不惊人死不休,看看它对这位音乐天才做了怎样的评价。 事先声明哈,本文就是一种英语学习类讲述,没带任何个人色彩&#xff…

网络舆情分析:利用自然语言处理(NLP)洞察公众情绪

🌐 网络舆情分析:利用自然语言处理(NLP)洞察公众情绪 📊 概述 在数字化时代,公众情绪和舆论对企业品牌、政治决策乃至社会趋势都有着深远的影响。通过自然语言处理(NLP)技术&#…

北京金融大数据有限公司X百望云签署战略合作协议 共同发布“金数数据要素流通云平台”

随着数据资产与数据要素相关政策密集出台,资本与实业企业均跃跃欲试。但因为没有龙头企业的方案引领和成熟的落地实践,市场呈谨慎观望态势,热度无处安放。 北京金融大数据有限公司(以下简称“金融大数据公司”)作为市…

动手学深度学习——softmax分类

1. 分类问题 回归与分类的区别: 回归可以用于预测多少的问题, 比如"预测房屋被售出价格",它是个单值输出。softmax可以用来预测分类问题,例如"某个图片中是猫、鸡还是狗?",这是一个多…

深入理解正则表达式:从入门到精通

title: 深入理解正则表达式:从入门到精通 date: 2024/4/30 18:37:21 updated: 2024/4/30 18:37:21 tags: 正则Python文本分析日志挖掘数据清洗模式匹配工具推荐 第一章:正则表达式入门 介绍正则表达式的基本概念和语法 正则表达式是一种用于描述字符串…

Bert基础(二十一)--Bert实战:文本摘要

一、介绍 1.1 文本摘要简介 文本摘要(Text Summarization),作为自然语言处理(NLP)领域的一个分支,其核心目标是从长篇文档中提取关键信息,并生成简短的摘要,以提供对原始内容的高度…

Go语言map

map 概念 在Go语言中,map 是一种内建的数据结构,它提供了一种关联式的存储机制,允许你以键值对的形式存储数据。每个键都是唯一的,并且与一个值相关联。你可以通过键来查找、添加、更新和删除值,这类似于其他编程语言…

MAKEFILE 从易到难

相信一个简单的makefile, 只要用过C语言的都能写出来。 但是如果工程中包含了几十个文件夹, 上万个文件, 那用一般的方式就搞不定了。 在用dpdk 的时候, 会经常修改makefile要适配我们的工程。 最开始也是用dpdk中自带的makefil…

wpf 树形结构

Simplifying the WPF TreeView by Using the ViewModel Pattern - CodeProject 【原创】WPF TreeView带连接线样式的优化(WinFrom风格) - iDream2016 - 博客园 (cnblogs.com)

Android 音视频播放器 Demo(二)—— 音频解码与音视频同步

音视频编解码系列目录: Android 音视频基础知识 Android 音视频播放器 Demo(一)—— 视频解码与渲染 Android 音视频播放器 Demo(二)—— 音频解码与音视频同步 RTMP 直播推流 Demo(一)—— 项目…