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

时间：2024-05-01 07:07:17

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

举个简单例子

在 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本地通过配置端口号区分不同预览方式-****博客

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

相关文章