今天遇到个问题，之前一直没遇到过，通过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. yaf代码生成工具的使用

    具体步骤如下: 1.下载php-yaf源码: git clone https://github.com/laruence/php-yaf/ 2.运行代码生成工具: /Users/helloxiaozh ...

  2. Linux的内核和权限

    1.内核包括的子系统是 : 进程管理系统 . 内存管理系统 . I/O管理系统 和文件管理系统  等四个子系统. 2.Linux系统中某个可执行文件属于root并且有setid,当一个普通用户 mik ...

  3. Shell脚本——cat/EOF输出多行

    在某些场合,可能我们需要在脚本中生成一个临时文件,然后把该文件作为最终文件放入目录中.(可参考ntop.spec文件)这样有几个好处,其中之一就是临时文件不是唯一的,可以通过变量赋值,也可根据不同的判 ...

  4. sys.argv[]用法-转载

    sys.argv变量是一个字符串的列表.特别地,sys.argv包含了命令行参数 的列表,即使用命令行传递给你的程序的参数. 这里,当我们执行python using_sys.py we are ar ...

  5. 错误代码： 1111 Invalid use of group function

    1.错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:update t_user_info t inner join t_pro_ ...

  6. The struts dispatcher cannot be found

    1.错误描述 严重:Servlet.service() for servlet jsp threw exception The struts dispatcher cannot be found.Th ...

  7. java.lang.Exception: Socket bind failed

    1.错误描述 严重: Failed to initialize end point associated with ProtocolHandler ["http-apr-8080" ...

  8. javaWeb之eclipse创建Servlet模板快捷键设置

    没有模板创建Servlet 出现的是除了doPOST 和doGet方法 还有许多方法和一些注释,页面不够清晰 创建模板的步骤是: 1.点击window下的preference 选项 2在 表单框里填写 ...

  9. .Net Core 1.0升级2.0（xproj项目迁移到.csproj ）

    vs2015的创建的项目是以*.xproj的项目文件,迁移到vs2017需要如下准备: 1.安装好vs2017(废话) 2.下载最新的SDK和 .NET Core 2.0 Preview 1 Runt ...

  10. angular路由操作

    在单页面应用程序中比如angular应用,我们需要根据url的变化(即:不同的请求),来分配不同的资源.根据请求的URL来决定执行哪个模块,这个过程叫路由,同时,我们需要设计路由规则. 下面给出一个简 ...