vue-cli 2.0同时启动Local和Network访问不需在host设置ip,动态读取本机ip

最新推荐文章于 2026-06-20 12:00:47 发布

原创最新推荐文章于 2026-06-20 12:00:47 发布 · 1.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

vue 专栏收录该内容

24 篇文章

订阅专栏

本文档介绍了如何在项目配置中修改index.js和package.json文件，以允许localhost和本地IP地址访问。通过将host设置为'0.0.0.0'，并更新compilationSuccessInfo.messages，可以实现本地开发服务器同时显示localhost和network访问地址。此外，通过在config/index.js设置autoOpenBrowser为true，并在webpack.dev.conf.js中启用useLocalIp，确保每次启动时自动打开对应IP地址的浏览器窗口。

1、首先设置localhost和本地ip访问
在config文件下的index.js文件中，修改host为：host: ‘0.0.0.0’，
或者在package.json文件下"scripts"的"dev"值后新增–host 0.0.0.0"，即：
“dev”: “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0”,
2、设置启动后终端显示localhost和network访问地址
修改build文件下compilationSuccessInfo的messages属性值：
compilationSuccessInfo: {
// 修改启动后终端显示localhost和network访问地址
messages: [
App runing at:,
Local: http://localhost:${port},
Network: http://${require('ip').address()}:${port},
],
},

进行上面的2步的配置后，就可以进行localhost访问和ip地址访问了
Local: http://localhost:8080
Network: http://192.168.1.102:8080

设置自启动并且每次打开都是对应ip地址（不设置打开http://0.0.0.0）
1.config/index.js:
module.exports = {
dev: {
autoOpenBrowser: true
//…
},
//…
}

2.build/webpack.dev.conf.js:

const devWebpackConfig = merge(baseWebpackConfig, {
  mode: 'development',
  devtool: config.dev.devtool,
  //...
  devServer: {
    useLocalIp: true,//避免打开浏览器为0.0.0.0，需手动改IP的情况
    //...
  },
  //...
}