今天遇到个问题,之前一直没遇到过,通过vue-cli脚手架搭建的项目,只能通过localhost访问,不能通过IP地址访问。

这是由 webpack 导致的,2017年11月12日的时候 webpack 升级,导致 /config/index.js 里面的配置项多了几项

其中一项就是 dev 中多了:

这样做能禁止局域网内的其他设备访问你的项目,如果想让其他设备通过IP访问你的项目,可以把'localhost'改为'0.0.0.0',

或者在package.json中的

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" 改为

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0"

这样就可以使用IP访问项目了。

这时候我又想在手机上访问项目,于是我用手机访问IP地址,发现页面空白(IOS10),我又用安卓打开,发现是有内容的。

这又暴露了一个问题,想要解决也很简单,只需修改config下面的index.js中的'devtool ',将'eval-source-map' 改为 'inline-source-map'

这样就能通过手机访问了。

到此结束,有问题联系QQ 412606846  微信同号

解决新版的vue-cli后无法通过ip访问vue项目的更多相关文章

  1. Vue CLI 5 和 vite 创建 vue3.x 项目以及 Vue CLI 和 vite 的区别

    这几天进入 Vue CLI 官网,发现不能选择 Vue CLI 的版本,也就是说查不到 vue-cli 4 以下版本的文档. 如果此时电脑上安装了 Vue CLI,那么旧版安装的 vue 项目很可能会 ...

  2. 安装vue CLI后, 出现安装权限问题

    问题:安装vue CLI后,出现:npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/usr/l ...

  3. DotNet Core 2.0部署后外网IP访问

    将DotNet Core2.0项目部署在Ubuntu上并且运行后,可以用localhost:5000来访问. 但是如果这时候用外网来访问就不行了. 这时候就有两种解决方案,第一种是用Nginx做代理实 ...

  4. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  5. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  6. Vue CLI 3搭建vue+vuex 最全分析

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  7. 前端——Vue CLI 3.x搭建Vue项目

    一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...

  8. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  9. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

随机推荐

  1. JS Cookie丢失问题

    JS Cookie丢失问题 前些天有人问我vue中使用proxy发送请求,为什么请求时cookie丢失,首先说一下我对cookie的理解: 1.cookie在正常情况下是会在每次请求时自动携带, 2. ...

  2. ARC068E - Snuke Line

    原题链接 题意简述 给出个区间和.求对于任意,有多少个区间包含的倍数. 题解 考虑怎样的区间不包含的倍数. 对于的倍数和,满足的区间不包含任何的倍数. 于是转化为二维数点问题,可以用可持久化线段树解决 ...

  3. dll和lib(包括静态链接库和与dll同时生成的lib)

    转:http://blog.csdn.net/galaxy_li/article/details/7411956 1:神马是Dll和Lib,神马是静态链接和动态链接 大家都懂的,DLL就是动态链接库, ...

  4. 关于VS2013调试IIS应用源代码时无法进入断点的问题总结

    调试无法进入断点 前言:今天再次遇到之前调试无法进入断点的问题,本来想不写呢觉得没什么只是又犯了同样的错误,但是我发现这个问题我分析起来还是挺费劲的,我仔细想了想原因, 是因为自己对之前的错误没有进行 ...

  5. Android Gradle项目Hotfix热修复技术的接入

    https://github.com/AItsuki/HotFix Issues MAC系统无法自动打包补丁,原因可能是路径分隔符问题 使用谷歌multidex分包后无法注入代码(开启multidex ...

  6. INF 右键安装驱动以及卸载

    INF 右键安装驱动以及卸载 之前写过一篇文章是关于INF文件详解的,大家可以参看INF文件详解,这次写的是关于INF右键安装,这样比较方便.卸载的话也是一句话,可以大大减少安装时间: 先将INF文件 ...

  7. Nginx 原理解析和配置摘要

    前言 Nginx 作为高性能的 http 服务器,知名度不必多言,相似产品中无出其右.本篇随笔记录我认为较为重要的原理和配置. 1. 原理解析 1.1 结构 以上是 Nginx 的结构图,其包含一个 ...

  8. android界面设计之布局管理

    谈到android界面设计,各种布局样式不得不提!传统的布局方式有6种,我们会一一介绍. 在android studio2.2版本之后出现了一款超棒的布局方式,真正意义上的所见即所得,后面我们也会讲到 ...

  9. 原生态的ajax代码

    <script type="text/javascript"> var xmlhttprequest; function GetXmlHttpRequest() { i ...

  10. Windows DLL资料整理

    1.使用Visual C++ 6.0创建dll 2. 函数的调用规则(__cdecl,__stdcall,__fastcall,__pascal) 要点: 1. 如果你的程序中没有涉及可变参数,最好使 ...