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. vue3 h函数

    1. 自定义指令(withDirectives 仅可在setup或render函数中使用)可以使用 withDirectives 将自定义指令应用于 VNode: const { h, resolve ...

  2. iOS组件化 pod命令创建私有库详解【引用其他私有库、oc、Swift混编】

    1.命令创建pod pod lib create pod的名字 2.根据指令依次填写信息 3.填写完成后会自动打开项目 .然后修改podspec文件即可 4.创建当前pod的git 仓库.将当前代码放 ...

  3. 阿里巴巴Java代码规范(一)

    现代软件架构都需要协同开发完成,高效协作即降低协同成本,提升沟通效率,所谓无规矩不成方圆,无规范不能协作. 本博客是对<阿里巴巴Java开发手册>的学习记录.大多记录的是强制规约,具体请参 ...

  4. Asp.net中web.config配置文件最全面详解 (转载至CSDN)

    转载至csdn链接如下 https://blog.csdn.net/u011966339/article/details/64905062 web.config是一个XML文件,用来储存Asp.net ...

  5. [746] Interlude Update 3

    [746] Interlude Update 3 Client 00 SendProtocolVersion 01 MoveBackwardToLocation 02 Say 03 RequestEn ...

  6. shell语法4-printf命令、test命令和判断符号[]、逻辑运算符&&和||

    一.printf命令 printf命令用于格式化输出,类似于C/C++中的printf函数. 默认不会在字符串末尾添加换行符!!! 例如: printf "%10d.\n" 123 ...

  7. java心形打印999

    心形打印999 农历七月初七,七夕节也就是中国民间版的所谓情人节,利用java打印心型999个图案可以让程序员更浪漫一些.现在下面由小编简要的说一下如何做到.首先下面是打印心形但却不是999个的代码, ...

  8. cnblogs.com/linycat

    核心技术 Java MySQL SSM SpringBoot MyBatisPlus Redis RabbitMQ Git Google ChatGPT 分布式架构 分布式会话 单点登录 分布式锁 读 ...

  9. 21_webpack_DDL

    DLL库(不再使用) DLL全称是动态链接库(Dynamic Link Library),是为软件在Windows中实现共享函数库的一种实现方式 webpack中也有内置DLL的功能,它指的是我们可以 ...

  10. wamp下载使用

    下载 搜索wamp进官网下载就行,FQ更快 下好打开,闪几个黑框后右下角有图标,右击图标->language->Chinese,即可切换中文模式 配置php环境变量 这个路径复制到path ...