多网卡环境下Vue项目npm run serve构建及加载缓慢问题求助

1. 给Vue开发服务器绑定固定IP #

npm run serve默认绑定0.0.0.0，多网卡环境下会遍历所有网卡地址，拖慢启动和加载速度。直接指定特定网卡的IP即可：

• 在项目根目录新建或修改vue.config.js，添加以下配置：

module.exports = {
  devServer: {
    host: '192.168.x.x', // 填你要用来运行前端的网卡IP，比如eth1的IP
    port: 8080 // 端口保持原设置或自定义均可
  }
}

• 重启npm run serve，让服务仅绑定指定网卡，避免无意义的多网卡寻址开销。

2. 关闭Node.js的DNS反向解析 #

多网卡环境下Node.js会自动尝试反向DNS查询，导致额外延迟。启动服务时通过环境变量禁用该行为：

• 直接在命令行执行：

NODE_NO_WARNINGS=1 NODE_ENV=development npm run serve

• 嫌麻烦就修改package.json里的脚本：

"scripts": {
  "serve": "NODE_NO_WARNINGS=1 NODE_ENV=development vue-cli-service serve"
}

3. 调整网卡优先级 #

系统默认路由可能未选择最优网卡，导致前端资源加载路径异常：

• Linux下先查看当前路由优先级：

ip route show

• 将常用网卡（比如eth1）设为最高优先级，修改路由表（示例）：

ip route add default via 192.168.x.1 dev eth1 metric 100
ip route del default via 原默认网关IP dev 其他网卡名 metric 原优先级数值

• Windows系统：打开「网络和共享中心」→「更改适配器设置」，右键常用网卡→「属性」→「IPv4」→「高级」，调小接口跃点数（数值越小优先级越高）。

4. 检查前端依赖的网络配置 #

部分插件（如axios）可能默认使用0.0.0.0，导致多网卡下寻址混乱：

• 把axios的baseURL改成后端绑定的固定IP：

axios.defaults.baseURL = 'http://后端绑定的IP:端口号'

• 若使用WebSocket等实时通信代码，确保仅连接指定IP的后端服务，避免自动探测多网卡。

5. 禁用未使用的网卡 #

如果不需要同时启用4块网卡，直接禁用闲置网卡，减少系统探测开销：

• Linux下直接执行：

sudo ifconfig eth2 down
sudo ifconfig eth3 down
sudo ifconfig eth4 down

• 需永久禁用可通过netplan等工具修改系统网络配置文件。

内容的提问来源于stack exchange，提问作者Hesh_Band