VUE运行项目后,只有local地址,没有network地址(添加nerwork地址)

使用前

使用后

解决方案

1.找到build文件夹下的webpack.dev.conf.js文件,更改messages中的内容

javascript 复制代码
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [
            `App running: `,
            `Local:  http://${devWebpackConfig.devServer.host}:${port}`,
            `Network: http://${require('ip').address()}:${port}`,
          ]
        },
      }))

这里就可以出现了,如果出现以下无法访问网站问题,不能使用,请继续添加下面步骤

2.找到设置代理的地方,添加public,写入自己电脑的Ipv4地址

javascript 复制代码
 public:'192.168.x.xx'//ip地址


3.在package.json中的script的dev,添加--host 0.0.0.0

javascript 复制代码
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0 ",
  },

重新运行就可以了

相关推荐
阮小贰9 分钟前
干支编码的确定性实现:节气切分 + 1000 条溯源断语(附 JS 源码)
开发语言·javascript·ecmascript
雪芽蓝域zzs15 分钟前
Vue3 + Vite本地模拟数据(读取 JSON 数据)
前端
亿元程序员17 分钟前
还有高手?用Shader让图片中的3D圆环转起来!
前端
灯澜忆梦18 分钟前
【基于GO的Web开发14】gin请求重定向
前端·后端·golang·gin
qq_4523962319 分钟前
第十一篇:《前端性能优化体系:从加载到交互的全链路》
前端·性能优化·交互
Mh23 分钟前
听说我兄弟喜欢跑车,所以必须安排上
前端·javascript·vue.js
zttbee23 分钟前
vue学习(白话功能版)
前端·vue.js·学习·前端框架
qq_4260039625 分钟前
多语言新增语种全量测试策略
前端·javascript·python·pycharm·自动化
黄敬峰30 分钟前
从零搭建 Next.js 单词管理系统:Supabase + Drizzle ORM + shadcn/ui 全栈实战
javascript·面试
nicole bai32 分钟前
前端封装el-table及注意点
前端·javascript·vue.js