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. QtQuick与Qml介绍

    文章纲要: 1.QtQuick是什么 2.qml与QtQuick关系 一.QtQuick是什么 "quick--快速创建应用程序" "quick--Qt User Int ...

  2. 2022-05-23内部群每日三题-清辉PMP

    1.在项目执行过程中,职能经理识别到有关外包团队的新内部风险,职能经理要求项目经理提供一个不会对项目产生负面影响的快速解决方案.项目经理应该怎么做? A.制定风险分解结构(RBS) B.根据影响的严重 ...

  3. OI常见缩写

    AC = Apareciym 显形咒 CE = Crucio 钻心咒 PE = Petrificus 石化咒 RE = Reducto 粉碎咒 WA = Wingardium Leviosa 悬浮咒 ...

  4. Kubernetes 设置master相关

    设置master调度命令 1.设置master一般情况下不接受pod调度 sudo kubectl taint nodes master node-role.kubernetes.io/master= ...

  5. 069_VisualForce Ajax 更多用法解读02

    一.同步调用的异常处理:AJAX Toolkit  try catch... <html> <head> <script src="/soap/ajax/44. ...

  6. 处理Android的物理后退按钮

    在文章.聊天.联系.相册四个页面时,用户点击Android 物理键返回,需要直接退出程序.我这里处理很简单,直接使用react-navigation的属性backbehavior就很快的解决了. &l ...

  7. 关于.NET CORE 的 swagger 分组简单使用

    在避免swagger接口过多时,可以使用分组进行功能区分 简单三部曲 1.添加分组和级别名称 services.AddSwaggerGen(c => { #region swagger分组 c. ...

  8. appium遇到的问题

    问题1:权限问题:java.lang.SecurityException: Injecting to another application requires INJECT_EV ENTS permi ...

  9. 「部署日记」Android Studio乱码解决方案

    弄了一台新电脑,第一件事肯定是弄好打造台啦 于是VS.AS.CRD.NSIS.Adobe全家桶全安装完毕, 问题来了,在打开Android Studio时,出现乱码,比如 这样的: 这样的: 这样的: ...

  10. usb 2.0 request