你也许会问有了开发调试本地浏览,为什么还要服务端构建之后在本地浏览?
举个简单例子
在 Nuxt 3 服务端打包中,由于运行环境不同,无法直接访问
process
对象。服务端打包通常是在 Node.js 环境中进行的,而process
对象是 Node.js 中的全局对象,但在浏览器端不可用。
package.json代码片段
javascript
"scripts": {
"build": "nuxt build", # 构建
"dev": "nuxt dev --host",
"generate": "nuxt generate",
"preview": "nuxt preview", # 构建后预览
"postinstall": "nuxt prepare"
},
nuxi preview 方式
项目构建(build)完成后,在终端执行 npm run preview
![](https://file.jishuzhan.net/article/1785298278372347906/304ed225a314dbc0e340bbdd95a3e23d.webp)
注意:如果你开启了pm2或本地开发调试(npm run dev)打开了记得关闭它们,因为它们可能占用3000端口。
当然你也可以调整端口号做区分,这样就不会与其他进程产生冲突了。具体请看nuxt3本地通过配置端口号区分不同预览方式-CSDN博客
执行npm run preview命令后出现下图的结果,这时候你就可以在浏览器打开 http://localhost:3000/ 进行浏览了 🎉
![](https://file.jishuzhan.net/article/1785298278372347906/b1efc84e0cfd32ed83f9e2bc220007c1.webp)
Node.js Server
正如图1所示,构建工具会告诉你,你打包后的启动资源放在了一个叫 .output/server文件夹里
![](https://file.jishuzhan.net/article/1785298278372347906/cdc19d59ee98e9922a279e789cc136e8.webp)
构建目录如下图所示
![](https://file.jishuzhan.net/article/1785298278372347906/3d81354bf39f04ab7d29db49af8d7e65.webp)
在vscode新建终端,输入 node .\.output\server\index.mjs
..
这时候你就可以在浏览器打开 http://localhost:3000/ 进行浏览了 🎉
PM2
创建执行文件
在项目根目录创建 ecosystem.config.cjs 文件
javascript
module.exports = {
apps: [
{
name: 'MyNuxtWeb', # 应用名称
port: '3000', # 端口号
exec_mode: 'cluster', # 设置为cluster让 PM2 知道您想要在每个实例之间进行负载平衡
instances: '1', # 1 意味着 PM2 可用 CPU 的数量
script: './.output/server/index.mjs' # 命令名称
}
]
}
安装pm2
全局安装pm2管理工具
bash
$ npm install pm2@latest -g
# or
$ yarn global add pm2
启动pm2管理工具,并查看日志
在项目根目录,终端执行
bash
# 选项 --attach :启动并查看日志
$ pm2 start ecosystem.config.cjs --attach
# 通过 Ctrl-C 退出时,应用程序仍将在后台运行。
![](https://file.jishuzhan.net/article/1785298278372347906/2f1f5debd10062bc3e2c2cfead2394fe.webp)
(执行结果 )
这时候你就可以在浏览器打开 http://localhost:3000/ 进行浏览了 🎉
重启
如果日志报错导致项目无法运行,可以重启
bash
# 重新启动应用程序:
$ pm2 restart MyNuxtWeb
# 重新启动所有应用程序:
$ pm2 restart all
# 重新启动多个应用程序:
$ pm2 restart MyNuxtWeb MyNuxtWeb2 MyNuxtWeb3
![](https://file.jishuzhan.net/article/1785298278372347906/177e8323c36580553bfb7988782aab13.webp)
(重启效果)
![](https://file.jishuzhan.net/article/1785298278372347906/51d85baaae68f6303f79fb7dbacc7cf8.webp)
(日志输出)
停止
bash
# 停止指定的应用程序
$ pm2 stop MyNuxtWeb
$ pm2 stop [process_id]
# 停止所有
$ pm2 stop all
# 停止多个应用程序:
$ pm2 stop MyNuxtWeb1 MyNuxtWeb2 MyNuxtWeb3
![](https://file.jishuzhan.net/article/1785298278372347906/aae98ead2813df30c225a8c31ea8350b.webp)
(根据进程id进行停止操作)
删除
如果你刚开始不小心给instances设置成max,你可能需要删除一些。😂
bash
# 删除应用程序
$ pm2 delete MyNuxtWeb
# 删除全部
$ pm2 delete all
![](https://file.jishuzhan.net/article/1785298278372347906/00cabb4cc585fbd1aa1c1e3a214b5846.webp)
(删除进程)
如果你同时打开了日志视图,可以发现日志进程也被终结了。
将PM2连接到pm2.io运行
Server连接方式
![](https://file.jishuzhan.net/article/1785298278372347906/f78177bc4635f0a8d0e056ec26b38b29.webp)
![](https://file.jishuzhan.net/article/1785298278372347906/5a7552839bd1c3622315e62292f7ea7f.webp)
(输入pm2.io提供的公钥和密钥)
![](https://file.jishuzhan.net/article/1785298278372347906/38ccf65f5b4774de91758b6251a1a43b.webp)
(pm2.io视图界面)
AWS连接方式
在package.json添加以下代码
javascript
"scripts": {
"prod:start": "pm2-runtime ecosystem.config.cjs"
}
在.env添加一下代码
javascript
# pm2.io 公钥
PM2_PUBLIC_KEY= pm2.io公钥
# pm2.io 密钥
PM2_SECRET_KEY= pm2.io密钥
在终端执行 npm run prod:start
![](https://file.jishuzhan.net/article/1785298278372347906/f3a8af2f05610142fc3b8d8eb979e582.webp)
如果你提前开好窗口进行对比,你会发现
启动 prod:start 命令前
![](https://file.jishuzhan.net/article/1785298278372347906/59d15a41f01d6401a454bbdce1113ae4.webp)
启动prod:start命令后
![](https://file.jishuzhan.net/article/1785298278372347906/c171ee7c6a075bb19b842c7f204c06f3.webp)
以上就是nuxt3项目构建后在本地浏览的3种方式。
pm2.io功能非常强大,有兴趣的可以到官方了解详情。