nuxt本地服务端口,端口占用

因UI看效果的需要,开启本地服务实时更新,以达到更好的沟通。
开启的基本方法:

1.package.json当中添加配置

缺点只能写死端口号,当遇到端口占用直接报错。

  "config": {
    "nuxt":{
      "host":"0.0.0.0",
      "port":"8099"
    }
  },

2.使用Script跑命令

这样可以实现,命令行控制端口号,但还是不够优秀。

"scripts": {
    "dev": "nuxt --hostname 0.0.0.0 --port 8099 );
"
  },
//终端: npm run dev

3.使用node-portfinder找到未占用端口,跑起来

// npm i portfinder
// npm i shelljs

在脚本处新建port.js

// port.js
const portfinder = require('portfinder'); // 找到有效的 port
const { exec } = require('shelljs'); // 执行 shell

portfinder.basePort = 8099; // 最低的端口
portfinder.highestPort = 9000; // 最高的端口

async function getPort() {
  let port = await portfinder.getPortPromise(); // port 为可用端口
  exec(`nuxt --hostname 0.0.0.0 --port ${port}`); // 跑命令
}
getPort();
  "scripts": {
    "dev": "node ./port.js", // 脚本所在的目录
  },

// npm run dev 大功告成

后面会接着出 portfinder / shelljs 这两个实用包详情。

你可能感兴趣的:(nuxt本地服务端口,端口占用)