vue运行项目只有local地址，没有network地址

最新推荐文章于 2025-03-10 19:04:58 发布

原创最新推荐文章于 2025-03-10 19:04:58 发布 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

博客介绍了前端代码的使用，先找到文件夹下文件更改内容，若不能使用，需找到设置代理处添加自己电脑的 Ipv4 地址，给出了获取该地址的方法，即打开 CMD 输入相关指令，最后在某处添加内容，重新运行即可。

如图：

使用前
使用后

下面放上代码：

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

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

这里就可以出现了，如果不能使用，继续添加下面步骤
2.找到设置代理的地方，添加public，写入自己电脑的Ipv4地址
在这里插入图片描述自己电脑的Ipv4地址获取方法：
打开CMD，输入ipconfig，代入到上面的public即可

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

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0 ",
    "build": "set NODE_ENV=production && node --max_old_space_size=4096 build/build.js"
  },

在这里插入图片描述
重新运行就行了