生产环境下Nuxt3如何设置部署端口号？

Nuxt3默认的端口号3000.如果我们在一台服务器中部署多个Nuxt应用，都是3000端口必然会冲突，所以需要修改默认的端口号。在官网文档中，介绍的端口号修改方式是修改env环境变量。这个方式在Vercel或者一些serverless环境非常方便，在自己的服务器中，不可能设置多个PORT变量，所以有点鸡肋。
下面介绍一下在自己的服务器上如何修改Nuxt3默认端口。

教程部分

Nuxt3打包后如何修改端口号？

首先声明，我们这里介绍的是服务器渲染模式。如果是SPA或者SSG模式，纯静态文件，不需要端口号。

通过npm run build命令打包后，在.output文件夹，可以看到如下文件结构：

/.output
|---/public
|--/server
|-- nitro.json

打开上面的server文件夹，找到/chunks/runtime.mjs文件，搜索如下关键词：
process.env.PORT

搜索后，能看到如下代码：

const port = destr(process.env.NITRO_PORT || process.env.PORT) || 3e3;

上面的代码中，3e3就是3000，改成你想自定义的端口号，比如3001即可。

还是在Nuxt3中修改端口号的几种方式:

知识补充：所有修改端口号的方法

1.开发环境

如果是开发环境，只需要在nuxt.config.ts文件中配置即可，具体配置方法如下：

export default defineNuxtConfig({
  devServer: {
   port:3001
  }
})

2. 生产环境

在生产环境下，我们可以先配置nuxt的环境变量参数，然后在服务器上配置环境变量。具体方法如下：
（1）第一步：在nuxt应用的.env文件中，新增以下变量：

PORT=3001
//NITRO_PORT=3001

有的应用没有.env文件，可以自己创建一个。PORT变量和NITRO_PORT变量是等价的，设置一个即可。
（2）第二步：在服务器上设置环境变量
这里以Linux系统为例，在命令上中输入以下命令：

echo 'export PORT=3001' >> ~/.bashrc

这个命令是为当前用户设置环境变量。
如果使用这种方式，大家要理解环境变量的设置方式和作用范围。
Windows系统可以自行搜索环境变量的设置方式。

大家好，我是刘明，前端工程师，AI算法工程师，华为昇思布道师。大家如果有问题可以给我私信，欢迎大家多多交流