nuxt项目改默认端口

nuxt项目的搭建方式:官方提供的脚手架搭建的:

npx create-nuxt-app nuxt
我使用create-nuxt-app脚手架搭建了一个nuxt的服务端渲染项目,这服务的默认的服务端口是3000.假如说我的服务器中启动了其他的服务占用了3000端口,那么我在启动我刚搭建的nuxt项目的时候,是不能够被搭建成功的,会提示3000端口已被占用.

这里说明了一个问题,就是搭建的这个nuxt服务,不会判断它提供的默认端口是否已经被占用,如果被占用了就替换一个其他没有被占用的端口这样的功能.既然它没有给提供这样的功能,那我们就自己给他替换一下端口吧.

https://zh.nuxtjs.org/faq/host-port/ 它的官方的文档已经给我们提供了修改端口的方法.

官方给我们提供了5中修改的方式:

1.作为命令参数直接传递

方式:nuxt --hostname myhost --port 3333,即

“scripts”: {
“dev”: “nuxt --hostname myhost --port 3333”
}
这种方式我们没有配置成功.我的scripts如下:

“scripts”: {
“lint”: “eslint --ext .js,.vue --ignore-path .gitignore .”,
“precommit”: “npm run lint”,
“test”: “jest”,
“dev”: “cross-env NODE_ENV=development nodemon server/index.js --watch server”,
“build”: “nuxt build”,
“start”: “cross-env NODE_ENV=production node server/index.js”,
“generate”: “nuxt generate”
},
我不知道怎么再向dev命令中添加一个新的执行脚本,这里我暂时还不知道,接下来我学习好了,再来补上这种方式吧.

2.在nuxt.config.js中配置host和port参数

方式:

export default {
server: {
port: 8000, // default: 3000
host: ‘0.0.0.0’, // default: localhost
},
// other configs
}
这种方式我添加成功了:

我改动端口后服务可以正常启动了,并且修改模板后的内容也渲染到了页面中.这里需要做的其实很简单,就是在nuxt.config.js添加了一个server的配置项:

export default {
server: {
port: 3002, // default: 3000,修改为了3002
host: ‘localhost’, // default: localhost
},
// other configs,其他的配置,没有做任何的变化
}
通过这种方式虽然修改成功了,但也引出了新的问题,BrowserslistError: Unknown browser query android all报出了这样的错误,但是代码在开发模式下可以正常执行.生产环境没有测试.

官方的文档中第3,第4,第5种方法,我没有实际的操作、尝试,因为这3种方法都需要在dev命令后添加新的执行脚本,而我现在还不知道怎么能够使一个命令执行多个脚本.

文档中提到了在修改主机和端口的时候,如果为port指定了字符串值‘0’(不是数字型的0),那么服务将会给我们的nuxt应用随机分配一个随机端口.

这里我经过实际测试,并没有达到预期的效果.如果我为port参数指定了字符串值‘0’,那么在启动node服务的时候,就是指定了端口0,而没有随机分配.如下演示:

export default {
server: {
port:‘0’, // default: 3002
host: ‘localhost’, // default: localhost
},
// other configs,其他的配置,没有做任何的变化
}
实际运行结果:

并没有随机分配端口.当然了,端口0,是不能运行服务的.

https://blog.csdn.net/hbysj/article/details/93240527