当前位置: 首页 > news >正文

前端项目启动后,只有localhost地址,没有ip地址

1.确定具体构建工具

项目用的是 vue-cli@2.x(webpack模板版),配置文件是 config/index.js

2.修改 config/index.js:作用:允许局域网访问你的项目

将  host: 'localhost', 改为:host: '0.0.0.0',

3.修改 build/dev-server.js(我项目中是build/webpack.dev.conf.js)

代码:

const os = require('os')
function getLocalIP() {const interfaces = os.networkInterfaces()for (const devName in interfaces) {const iface = interfaces[devName]for (let i = 0; i < iface.length; i++) {const alias = iface[i]if (alias.family === 'IPv4' && !alias.internal) {return alias.address}}}return 'localhost'
}module.exports = new Promise((resolve, reject) => {portfinder.basePort = process.env.PORT || config.dev.portportfinder.getPort((err, port) => {if (err) {reject(err)} else {// publish the new Port, necessary for e2e testsprocess.env.PORT = port// add port to devServer configdevWebpackConfig.devServer.port = portconst localIP = getLocalIP()   // Add FriendlyErrorsPlugindevWebpackConfig.plugins.push(new FriendlyErrorsPlugin({compilationSuccessInfo: {messages: [`Your application is running at:\n` +`  ➜ Local:   http://localhost:${port}\n` +`  ➜ Network: http://${localIP}:${port}`]},onErrors: config.dev.notifyOnErrors? utils.createNotifierCallback(): undefined}))resolve(devWebpackConfig)}})
})

http://www.lryc.cn/news/595714.html

相关文章:

  • MoonBit Meetup 杭州站丨 探讨AI基础软件的精彩回顾
  • 面向对象分析与设计40讲(6)设计原则之开闭原则
  • pandas库的基本运用
  • 传统RNN模型
  • vcs门级仿真(后仿真)指南
  • Spring、Spring MVC、Spring Boot、Spring Cloud的联系和区别
  • 异构融合 4A:重构高性能计算与复杂场景分析的安全与效率边界
  • gpt面试题
  • MCP vs 传统集成方案:REST API、GraphQL、gRPC的终极对比
  • 深入浅出Proxy与Reflect:从“黑中介“到“数据管家“的进阶之路
  • OpenCV Mat UMat GpuMat Matx HostMem InputArray等设计哲学
  • 京东AI投资版图扩张:具身智能与GPU服务器重构科研新范式
  • 基于单片机智能药盒/智能药箱/定时吃药系统
  • PHP 文件上传
  • Python----大模型(基于Fastapi+streamlit的机器人对话)
  • 自研能管项目开发界面
  • 【Linux基础知识系列】第五十六篇 - 使用File命令识别文件类型
  • 记一次flink资源使用优化
  • Java内部类与Object类深度解析
  • 聊聊登录接口的混合加密:AES+RSA双剑合璧
  • 【node】npm包本地开发与调试
  • 深入解析Hadoop中的Region分裂与合并机制
  • 关于集合的底层数据结构
  • 【C++进阶】揭秘list迭代器:从底层实现到极致优化
  • Pulsar存储计算分离架构设计之Broker无状态
  • 飞算科技:用AI与数智科技,为产业数字化转型按下“加速键”
  • 《声音分类模型》
  • 一、Vue概述以及快速入门
  • 深度学习 --- 激活函数
  • Datawhale 202507 夏令营:让AI学会数学推理