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.rhkb.cn/news/318451.html

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

相关文章

【云原生】Docker 实践(一):在 Docker 中部署第一个应用

Docker 实践(一):在 Docker 中部署第一个应用 1.使用 YUM 方式安装 Docker2.验证 Docker 环境3.在 Docker 中部署第一个应用3.1 小插曲:docker pull 报 missing signature key 错误3.2 重新安装 Nginx 1.使用 YUM 方式安装 Docker…

微信小程序+esp8266温湿度读取

本文主要使用微信小程序显示ESP8266读取的温湿度并通过微信小程序控制LED灯。小程序界面如下图所示 原理讲解 esp8266 通过mqtt发布消息,微信小程序通过mqtt 订阅消息,小程序订阅后,就可以实时收到esp8266 传输来的消息。 个人可免费注册五个微信小程序账号,在微信小程序官…

基于java,SpringBoot和VUE的求职招聘简历管理系统设计

摘要 基于Java, Spring Boot和Vue的求职招聘管理系统是一个为了简化求职者与雇主间互动流程而设计的现代化在线平台。该系统后端采用Spring Boot框架,以便快速搭建具有自动配置、安全性和事务管理等特性的RESTful API服务,而前端则使用Vue.js框架构建动…

2024最新docker部署gitlab

docker部署gitlab 快速命令 1 拉取镜像 docker pull gitlab/gitlab-ce2 启动容器 docker run -itd \-p 9980:80 \-p 9922:22 \-v /opt/soft/docker/gitlab/etc:/etc/gitlab \-v /opt/soft/docker/gitlab/log:/var/log/gitlab \-v /opt/soft/docker/gitlab/opt:/var/opt/g…

【C语言实现贪吃蛇】(内含源码)

前言:首先在实现贪吃蛇小游戏之前,我们要先了解Win32 API的有关知识 1.Win32 API Windows这个多作业系统除了协调应用程序的执行、分配内存、管理资源之外,它同时也是一个很大的服务中心,调佣这个中心的各种服务(每一…

设置cordova编译时采用本地已下载的gralde

设置cordova编译时采用本地已下载的gralde 前言 编译Cordova时,往往会根据cordova工程的需要从网络上下载不同版本的gradle用于编译,每次下载带来编译速度慢,甚至因为网络不稳定,导致提示因无法下载gradle而编译失败!…

【如何使用SSH密钥验证提升服务器安全性及操作效率】(优雅的连接到自己的linux服务器)

文章目录 一、理论基础(不喜欢这部分的可直接看具体操作)1.为什么要看本文(为了zhuangbility)2.为什么要用密钥验证(更安全不易被攻破)3.密码验证与密钥验证的区别 二、具体操作1.生成密钥对1.1抉择&#x…

挑战一周完成Vue3项目Day4: 用户管理+角色管理+菜单管理+首页+暗黑模式/主题切换

一、用户管理 1.静态搭建 src/views/acl/user/index.vue <template><el-card style"height:80px;"><el-form :inline"true" class"form"><el-form-item label"用户名&#xff1a;"><el-input placehold…

LT2611UX四端口 LVDS转 HDMI2.0,带音频

描述LT2611UX 是一款面向机顶盒、DVD 应用的高性能 LVDS 至 HDMI2.0 转换器。LVDS输入可配置为单端口、双端口或四端口&#xff0c;具有1个高速时钟通道和3~4个高速数据通道&#xff0c;工作速率最高为1.2Gbps/通道&#xff0c;可支持高达19.2Gbps的总带宽。LT2611UX 支持灵活的…

设计模式之MVC模式

在编程江湖闯荡多年&#xff0c;我手中打磨过的设计模式多如繁星&#xff0c;但论及经典与实用&#xff0c; MVC&#xff08;Model-View-Controller&#xff09;模式 绝对是个中翘楚&#xff01;它不仅是Web应用的骨架&#xff0c;更是软件架构的智慧结晶。今天&#xff0c;咱们…

tomcat篇-windows 运行tomcat的startup.bat时,终端打印的中文显示为乱码

当运行Tomcat的startup.bat时&#xff0c;如果终端中中文显示为乱码&#xff0c;这通常是因为Tomcat使用的日志输出编码与Windows命令行默认的编码不匹配。针对这一问题&#xff0c;你可以尝试以下步骤来解决&#xff1a; 1、执行startup.bat&#xff0c;在输出的窗口右击&…

从Paint 3D入门glTF

Paint 3D Microsoft Paint 3D是微软的一款图像编辑软件&#xff0c;它是传统的Microsoft Paint程序的升级版。 这个新版本的Paint专注于三维设计和创作&#xff0c;使用户可以使用简单的工具创建和编辑三维模型。 Microsoft Paint 3D具有直观的界面和易于使用的工具&#xff0…

笔记-用Python脚本启停JAR程序

用Python脚本启停JAR程序&#xff0c;需要用到python中的以下内置模块 subprocess 是 Python 的一个标准库模块&#xff0c;用于在新进程中执行子命令&#xff0c;获取子进程的输入/输出/错误以及返回码等os 是 Python 的一个标准库模块&#xff0c;它提供了与操作系统交互的功…

ICode国际青少年编程竞赛- Python-1级训练场-for循环练习

ICode国际青少年编程竞赛- Python-1级训练场-for循环练习 1、 for i in range(3):Dev.step(4)Dev.turnLeft()2、 for i in range(3):Dev.step(2)Dev.turnRight()Dev.step(2)Dev.turnLeft()3、 for i in range(3):Dev.step(2)Dev.turnRight()Dev.step(2)Dev.turnLeft()4、 for…

ubuntu与redhat的不同之处

华子目录 什么是ubuntu概述 ubuntu版本简介桌面版服务器版 安装部署部署后的设置设置root密码关闭防火墙启用允许root进行ssh登录更改apt源安装所需软件 网络配置Netplan概述配置详解配置文件DHCP静态IP设置设置 软件安装方法apt安装软件作用常用命令配置apt源 deb软件包安装概…

C语言中的三大循环

C语言中为我们提供了三种循环语句&#xff0c;今天我就来与诸君细谈其中之奥妙。循环这一板块总结的内容较多&#xff0c;而且&#xff0c;很重要&#xff01;&#xff08;敲黑板&#xff01;&#xff01;&#xff01;)&#xff0c;所以诸君一定要对此上心&#xff0c;耐住性子…

golang反射

go反射 反射基本介绍应用场景基本使用结构体注意练习最佳实践遍历结构体的方法&#xff0c;调用接头体的方法&#xff0c;获取结构体的标签 反射 基本介绍 反射可以在运行时动态获取变量的各种信息&#xff0c;比如变量的类型(type)、类别(kind)如果是结构体变量&#xff0c;…

设计模式: 工厂模式

工厂模式&#xff08;Factory Pattern&#xff09;是 Java 中最常用的设计模式之一&#xff0c;这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 工厂模式提供了一种创建对象的方式&#xff0c;而无需指定要创建的具体类。 工厂模式属于创建型…

【Web】D^3CTF之浅聊d3pythonhttp——TE-CL请求走私

目录 step0 题目信息 step1 jwt空密钥伪造 step1.5 有关TE&CL的lab step2 TE-CL请求走私 payload1 payload2 step0 题目信息 注意到题目源码前端是flask写的&#xff0c;后端是web.py写的 frontend from flask import Flask, request, redirect, render_templat…

万界星空科技商业开源MES+项目合作+商业开源低代码平台

今天我想和大家分享的是一套商业开源的 MES制造执行管理系统带源码。对于制造业而言&#xff0c;MES 是一个至关重要的系统&#xff0c;它可以帮助企业提高生产效率、优化资源利用、提高产品质量&#xff0c;从而增强市场竞争力。 什么是 MES&#xff1f; MES 是指通过计算机技…