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

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

2.然后找到package.json配置文件

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

3.配置完之后重启项目,你就会发现打开的http://0.0.0.0:8080是个空白网页,并没有打开IP地址或者localhost

**4.出现上面这种情况之后,我们还需要配置一下build文件夹下面的webpack.dev.conf.js文件

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

**5.最后配置一下启动项目 通过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
}))

**6.最后看下一结果

VUE2.0 脚手架搭建项目,如何配置本地IP地址访问项目,详解的更多相关文章

  1. vue2.0 在微信端如何使用本地IP访问项目

    我们会遇到这样的需求,在PC端开发vue脚手架项目,希望在微信端随时浏览页面(如果打包再发布到服务器又太麻烦),怎么办? 思路很简单:保证手机和电脑在同一个IP下,用同一个IP访问项目,这样就可以了: ...

  2. 解决tomcat服务器下,只能通过localhost,而不能通过127.0.0.1或者本地ip地址访问的问题

    今天在tomcat上部署了一个web应用以后,发现用localhost的方式来访问应用是正常的,但是换成127.0.0.1或者是本地的ip地址来访问,确出现访问不了的情况.之前想是不是防火墙的问题,于 ...

  3. nginx 配置禁用ip地址访问

    做过面向公网WEB运维的苦逼们肯定见识过各种恶意扫描.拉取.注入等图谋不轨行为吧?对于直接对外的WEB服务器,我们可以直接通过 iptables . Nginx 的deny指令或者是程序来ban掉这些 ...

  4. Tomcat 部署java web项目直接ip地址访问项目

    正常情况下,在访问在Tomcat中部署的项目是 http://localhost:8080/demo 方式 其中,IP,端口,项目名(Demo)都是必须的. 那么,怎么样才能通过 http://loc ...

  5. Tomcat去除项目名称和端口号,直接使用ip地址访问项目的方法

    网站开发过程中,一般的工程访问路径是 http://112.74.51.37/projectName如何设置成http://112.74.51.37/ 解决方法: 首先,进入tomcat的安装目录下的 ...

  6. python--django项目如何设置用自己的iP地址访问项目

    一.首先需要执行>manage.py runserver 0.0.0.0:8000. 二.在setting.py里面需要添加ALLOWED_HOSTS="*".

  7. tomcat服务器 去掉端口8080 以及项目名 直接使用IP地址访问

      >>>  先在web.xml中设置默认页面 <welcome-file-list> <welcome-file>/login.jsp</welcom ...

  8. vue-cli3.0 脚手架搭建项目的过程详解

    1.安装vue-cli 3.0 ? 1 2 3 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) ...

  9. Linux 上的Tomcat配置输入域名直接访问项目

    申请的域名备案通过了,域名是在阿里云上面的买的,一块钱,当初买服务器是买着来玩玩的. 既然申请的域名已经备案通过了,也配置了域名解析 ,服务器上也装了Tomcat,部署了web项目,下面来配置下通过域 ...

  10. vs2019 netocore项目本地程序ip地址访问需修改的配置文件

    IISPress启动项目后,打开IISPress托盘可以看到当前项目 根据图中标识出来的applicationhost.config文件路径,一般为你的项目解决方案目录下的.vs\解决方案文件夹\co ...

随机推荐

  1. PID名词解析

    在工程实际中,应用最为广泛的调节器控制规律为比例.积分.微分控制,简称PID控制,又称PID调节. 当被控对象的结构和参数不能完全掌握,或得不到精确的数学模型时,控制理论的 其它技术难以采用时,系统控 ...

  2. DP5340:国产兼容替代CS5340立体声音频A/D转换器芯片

    DP5340简介 DP5340 是一款完整的采样.模数音频信号转换. 抗混叠滤波的芯片,在串行格式下以每声道最高 200kHz 采样率高达 24 位宽,并支持大部分的音频 数据格式. DP5340 基 ...

  3. 01爬取豆瓣网电影数据进行numpy的练习

    level 2:10.案例:编写爬虫爬取豆瓣电影排行榜(电影名称,评分),保存为csv文件 a.用numpy加载csv数据 b.把评分列转换成float64类型 c.计算电影的平均评分 d.求评分最高 ...

  4. C/C++ union联合体介绍

    C/C++ union联合体介绍 文章参考:https://blog.csdn.net/mooneve/article/details/92703036 目录 C/C++ union联合体介绍 1. ...

  5. net core swaagger ui 报 Failed to load API definition错误

    在net core webapi用swaagger  报错记录,截图如下 解决办法,出现这种是因为我的controller里面的有一个方法确缺少了HttpGet attribute就是auction上 ...

  6. Python学习的第一次总结

    执行Python的方式:1.交互器(不易保存,闪现,不方便看)2.用win-cmd 来执行(用notepad++保存后执行) 开始 >> cmd >> cd c:\ #切c盘& ...

  7. Java的引用(强软弱虚)

    Java中引用相关的类 类 名 说明 ReferenceQueue 引用队列 与某个引用类绑定,当引用死亡后会进入这个队列对象标记为垃圾(并不代表回收了)后或虚引用的对象被回收后,会加入到引用队列 H ...

  8. 蓝牙信标、智能楼宇应用国产低功耗芯片BLE5.2 PHY6252

    PHY6252是一款支持BLE 5.2功能的系统级芯片(SoC),集成了低功耗的高性能多模射频收发机,搭载32位高性能低功耗处理器,提供64K retention SRAM.可选512/256K Fl ...

  9. 【Java学习Day06】注释种类、符号及用法

    注释种类 单行注释:只能注释一行文字 多行注释:可以注释一段文字 文档注释:用来生成说明文件 注释符号及用法 单行注释:// //后面写注释 多行注释:/**/ /* 我是注释 我是注释 我是注释 * ...

  10. 数据仓库服务 GaussDB(DWS)

    官网:总体介绍 https://support.huaweicloud.com/dws/index.html 部分源码解读 https://my.oschina.net/gaussdb?tab=new ...