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,一经查实,立即删除!

相关文章

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

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

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

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

刷代码随想录有感(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 &&…

北京金融大数据有限公司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 是一种内建的数据结构,它提供了一种关联式的存储机制,允许你以键值对的形式存储数据。每个键都是唯一的,并且与一个值相关联。你可以通过键来查找、添加、更新和删除值,这类似于其他编程语言…

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

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

Qt+Ubuntu20.04:打包qt

打包程序 参考 qt项目在Linux平台上面发布成可执行程序.run_qt.run不是虚拟机的配置文件-CSDN博客 Linux下Qt程序的打包发布(1)-不使用第三方工具 - 知乎 (zhihu.com) 过程 1、Release编译 先将你的程序在release下编译通过,保证下面打包的程序是你最新的。 2…

C#调用skiasharp操作并绘制图片

之前学习ViewFaceCore时采用Panel控件和GDI将图片及识别出的人脸方框和关键点绘制出来,本文将其修改为基于SKControl和SKCanvas实现相同的显示效果并支持保存为本地图片。   新建Winform项目,在Nuget包管理器中搜索并安装一下SkiaSharp和ViewFaceCore…

HTTP 多个版本

了解一下各个版本的HTTP。 上个世纪90年代初期,蒂姆伯纳斯-李(Tim Berners-Lee)及其 CERN的团队共同努力,制定了互联网的基础,定义了互联网的四个构建模块: 超文本文档格式(HTML) …

Linux基础——Linux开发工具(上)_vim

前言:在了解完Linux基本指令和Linux权限后,我们有了足够了能力来学习后面的内容,但是在真正进入Linux之前,我们还得要学会使用Linux中的几个开发工具。而我们主要介绍的是以下几个: yum, vim, gcc / g, gdb, make / ma…

【初识Redis】

初识Redis Redis(Remote Dictionary Server)是一个开源的内存数据库,它提供了一个高性能的键值存储系统,并且支持多种数据结构,包括字符串、哈希、列表、集合和有序集合等。Redis的特点包括: 内存存储&…

C语言实验-数组、字符串以及指针

一&#xff1a; 求一个NN矩阵主、次对角线上所有元素之和。矩阵输入、矩阵输出、矩阵对角线求和分别用三个子函数实现。&#xff08;N的值由用户从键盘输入&#xff09; #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h>void print(int(*arr…

有哪些好用的局域网电脑监控系统软件?

企业员工不好管理&#xff1f;&#xff1f;&#xff1f; 局域网已成为企业日常运营不可或缺的一部分。 然而&#xff0c;随着网络技术的普及&#xff0c;员工在局域网中的不当行为也日益增多&#xff0c;如滥用网络资源、泄露敏感信息、消极怠工等。 为了解决这些问题&#x…

植物大战僵尸杂交版

1.感谢作者潜艇伟伟迷 2.大小大概110M&#xff0c;下载链接在下方 链接&#xff1a;https://pan.baidu.com/s/1Ew6iTg0_d_Ut8N9_18KGLw 提取码&#xff1a;yspa 3.祝大家玩的开心

C++-10

1.C一个程序&#xff0c;实现两个类&#xff0c;分别存放输入的字符串中的数字和字母&#xff0c;并按各自的顺序排列&#xff0c; 类中实现-一个dump函数&#xff0c;调C用后输出类中当前存放的字符串结果。 例如&#xff0c;输入1u4y2a3d,输出:存放字母的类&#xff0c;输出a…

树,二叉树的基本概念介绍,二叉树的性质

目录 树 树的定义 树的相关概念 树的存储结构 树在实际中的运用&#xff08;表示文件系统的目录树结构 &#xff09; 二叉树 二叉树的定义 现实中的二叉树 二叉树的特点 特殊的二叉树 1.斜树 2.满二叉树 3.完全二叉树 二叉树的性质 性质1&#xff1a;二叉树的第…

网络基础(1)网络编程套接字UDP

要完成网络编程首先要理解原IP和目的IP&#xff0c;这在上一节已经说明了。 也就是一台主机要进行通信必须要具有原IP和目的IP地址。 端口号 首先要知道进行网络通信的目的是要将信息从A主机送到B主机吗&#xff1f; 很显然不仅仅是。 例如唐僧要去到西天取真经&#xff0…