解决新版的vue-cli后无法通过ip访问vue项目
今天遇到个问题,之前一直没遇到过,通过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项目的更多相关文章
- Vue CLI 5 和 vite 创建 vue3.x 项目以及 Vue CLI 和 vite 的区别
这几天进入 Vue CLI 官网,发现不能选择 Vue CLI 的版本,也就是说查不到 vue-cli 4 以下版本的文档. 如果此时电脑上安装了 Vue CLI,那么旧版安装的 vue 项目很可能会 ...
- 安装vue CLI后, 出现安装权限问题
问题:安装vue CLI后,出现:npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/usr/l ...
- DotNet Core 2.0部署后外网IP访问
将DotNet Core2.0项目部署在Ubuntu上并且运行后,可以用localhost:5000来访问. 但是如果这时候用外网来访问就不行了. 这时候就有两种解决方案,第一种是用Nginx做代理实 ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
- Vue CLI 3搭建vue+vuex 最全分析
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- 前端——Vue CLI 3.x搭建Vue项目
一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
随机推荐
- 1.10 tuple 元组
元组(tuple)属于不可变序列 tuple特性: 特性一:可包含任意对象的有序集合 特性二:通过下标索引访问元素 特性三:固定长度,异质,可任意嵌套 特性四:不支持原位改变 特性五:存储机制:对象引 ...
- c#IO的学习
常见应用方面 一.路径的相关操作,如判定路径是否合法,路径类型,路径的特定部分,合并路径,系统文件夹路径等内容:二.相关通用文件对话框,这些对话框可以帮助我们操作文件系统中的文件和目录:三.文件.目录 ...
- 蓝桥杯 求最大值 dp
这题很暴力的一个DP,d[i][j]表示前i个数对选择一些Ai的和为j的最大Bi和. 状态转移方程: dp[i][j]=max(dp[i][j],dp[i-1][j-sc[i].a]+sc[i].b) ...
- CodeForces-748C
这题就是确定一个点,然后去找能够实现最短距离的点且距离最远的点,因为题目要求点最少.在查找时,如果从最后的点开始枚举,找到的第一个满足距离最短的点一定是最远点,但是查找的复杂度是O(n),共有n次查找 ...
- java容器类分析:Collection,List,ArrayList
1. Iterable 与 Iterator Iterable 是个接口,实现此接口使集合对象可以通过迭代器遍历自身元素. public interface Iterable<T> 修饰符 ...
- MinGW下简单编译FFmpeg
2009.03.21补充:ffmpeg-0.5正式发布,地址为:[url]http://www.ffmpeg.org/releases/ffmpeg-0.5.tar.bz2[/url].修改了第7步, ...
- FusionCharts 2D帕累托图
1.了解帕累托图的特性以及和其他图的共性 2.设计帕累托图页面中引入图的类型以及怎么引入到页面 Pareto2D.html: <!DOCTYPE HTML PUBLIC "-//W3C ...
- iOS - Mac 常用快捷键
前言 可以按下组合键来实现通常需要鼠标.触控板或其他输入设备才能完成的操作. 要使用键盘快捷键,需按住一个或多个修饰键,同时按快捷键的最后一个键.例如,要使用快捷键 Command-C(拷贝),请按住 ...
- JNDI在本项目中的应用
一,在tomcat的context文件中做如下配置 <?xml version="1.0" encoding="UTF-8"?> <Conte ...
- ssm框架之将数据库的数据导入导出为excel文件
在这里首先我要将自己遇到的各种问题,以及需求记录下来,做一个备忘,便于以后查看: 需求:主要实现两个功能,将oracle数据库里的数据导出为excel,同时需要将excel表格的数据导入到数据库 环境 ...