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 ",
  },

重新运行就可以了

相关推荐
掘金安东尼4 小时前
纯 CSS 实现弹性文字效果
前端·css
牛奶5 小时前
Vue 基础理论 & API 使用
前端·vue.js·面试
牛奶5 小时前
Vue 底层原理 & 新特性
前端·vue.js·面试
anOnion5 小时前
构建无障碍组件之Radio group pattern
前端·html·交互设计
pe7er5 小时前
状态提升:前端开发中的状态管理的设计思想
前端·vue.js·react.js
SoaringHeart6 小时前
Flutter调试组件:打印任意组件尺寸位置信息 NRenderBox
前端·flutter
晚风予星7 小时前
Ant Design Token Lens 迎来了全面升级!支持在 .tsx 或 .ts 文件中直接使用 Design Token
前端·react.js·visual studio code
sunny_7 小时前
⚡️ vite-plugin-oxc:从 Babel 到 Oxc,我为 Vite 写了一个高性能编译插件
前端·webpack·架构
GIS之路7 小时前
ArcPy 开发环境搭建
前端
林小帅9 小时前
【笔记】OpenClaw 架构浅析
前端·agent