解决新版的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 生态中的工具基础标准化.它确保了各种构建工 ...
随机推荐
- RestTemplate 支持服务器内302重定向
Stack Overflow 里找到的代码,可以正常返回服务器302重定向后的响应 final RestTemplate restTemplate = new RestTemplate(); fina ...
- C#调用WebService时插入cookie
SOAPUI插入Cookie的方法 SOAP插入cookie的方法如下,点击Head,点击加号,然后直接设置就可以了. C#中调用webService时插入Cookie 由于调用的时候必须要带上coo ...
- shell脚本—— 字符串操作(长度,查找,替换)
表达式 含义 ${var} 变量var的值, 与$var相同 ${var-DEFAULT} 如果var没有被声明, 那么就以$DEFAULT作为其值 * ${var:-DEFAULT} 如果var没有 ...
- web工程导入新环境的注意事项
问题一:The type java.lang.Object cannot be resolved. 解决办法: 当你在Eclipse引用不同版本JDK工程时会发生该问题.由于你开发环境中应用了多个版本 ...
- python基础 数据类型 判断语句
python 类unix系统默认已经安装或使用源码包./confighuremakemake install python运行方法 通过交互式解释器 [root@room1pc01 ~]# pytho ...
- sqlserver中select造成死锁
死锁过程: select语句使用非聚族索引查询产量信息,会对非聚族索引添加共享锁,由于非聚族索引上没有select的全部数据列,(所以会有书签查找出现,)需要查询产量表.查询产量表时,需要对产量表数据 ...
- Token认证来龙去脉
在Web领域基于Token的身份验证随处可见.在大多数使用Web API的互联网公司中,tokens 是多用户下处理认证的最佳方式. 为什么要用 Token Token 完全由应用管理,所以它可以避开 ...
- R语言︱文本挖掘——jiabaR包与分词向量化的simhash算法(与word2vec简单比较)
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- <数据挖掘之道>摘录话语:虽然我比 ...
- java实现多线程三种方法
1.继承Thread类,重写run方法 2.实现Runnable接口,重写run方法 3.实现callable接口,重写call方法
- 美团CodeM复赛 02,03
02 城市网络 比赛时候写的是单调栈,真的是让人见笑了,基本思路就是dfs时候动态处理单调栈(带回溯),然后离线处理答案.题解是用了倍增的,效率高很多 #include <cstdio> ...