局域网内vue2 配置本地IP地址访问项目

本文主要是介绍局域网内vue2 配置本地IP地址访问项目，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在日常开发中同事可能需要访问你的前端项目，可以通过配置实现通过ip访问

一.首先找到config文件夹目录下的 index.js文件

            将此处的host的值修改为0.0.0.0(即 host: 0.0.0.0)

// Various Dev Server settings//host: 'localhost' //将localhost进行替换成 0.0.0.0host: '0.0.0.0', // can be overwritten by process.env.HOSTport: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be de

二.找到package.json配置文件

在dev最后加上 --host 0.0.0.0 

//在这句代码后面添加 --host 0.0.0.0" 如下
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0"",

 三.配置一下build文件夹下面的webpack.dev.conf.js文件

 devServer: {useLocalIp: true, //将useLoackIp设置为true 就可以了}

四.最后配置一下启动项目 通过localhost 和本地ip地址访问
同样还是在build文件夹下面的webpack.dev.conf.js文件找到

 devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({compilationSuccessInfo: {messages: [ //下面两个地方，直接复制即可`App runing at: `,` - Local: http://localhost:${port}`, //配置这里` - Network: http://${require('ip').address()}:${port}`,//配置这里],},onErrors: config.dev.notifyOnErrors? utils.createNotifierCallback(): undefined}))

 五.重新启动项目即可通过ip访问，记得要加端口哦

 

 

 

 

 

 

这篇关于局域网内vue2 配置本地IP地址访问项目的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---