实现vue项目可通过 IP 和 localhost 同时访问项目

localhost可以在本机访问,ip可以在同一局域网下的电脑或者移动端进行访问,运行结果如图:

在这里插入图片描述
第一步:在webpack.dev.conf.js文件中配置message属性:

在这里插入图片描述

messages: [
  `App runing at: `,
  `Local: http://localhost:${port}`,
  `Network: http://${require('ip').address()}:${port}`,
],

第二步:在config/index.js里面配置host字段:
在这里插入图片描述
第三步:在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",

最终效果如图(可在别的电脑或移动端同时访问):

在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐