vue项目配置同一局域网可使用ip访问的操作


Posted in Javascript onOctober 23, 2020

1、检查 package.json文件,scripts.dev设置 host改成 "0.0.0.0"

vue项目配置同一局域网可使用ip访问的操作

2、config文件中找到 index.js 文件的host改成 "0.0.0.0"

vue项目配置同一局域网可使用ip访问的操作

此处的"0.0.0.0"可以改成自己的ip,重启项目就可以了

补充知识:@vue/cli创建项目报错ERROR Failed to get response from /vue-cli-version-marker的解决方案

今天他们遇到一个很有意思的bug,用@vue/cli创建项目的时候报错了,还是个从来没见过的报错:

vue项目配置同一局域网可使用ip访问的操作

一开始以为是版本问题,毕竟报错信息上写着update,但是cli的版本是最新的,而且询问之后,node和npm版本也是最新的(12.16.1,截止我写这篇文章的时候是最新的);最要命的是,也没有老版本的vue-cli……

这就非常有意思了。按照惯例,遇到前端的问题,第一反应就是卸载重装,一套操作行云流水:

npm uninstall -g @vue/cli
npm cache clean --force
npm install -g @vue/cli

然而并没有什么用,查了半天网上也找不到相关的报错,这就很尴尬了。

后来我注意到下面有个yarn的输出,难道cli内建的是yarn?但是这不应当:

vue项目配置同一局域网可使用ip访问的操作

虽然觉得很不可思议,但我还是决定看看yarn的版本,yarn有重大嫌疑。果然:

vue项目配置同一局域网可使用ip访问的操作

问题找到了。但是这是啥?Hadoop?

后来才想起来,yarn同时也是Hadoop的一部分,用来调度资源的:

vue项目配置同一局域网可使用ip访问的操作

从环境变量里移除Hadoop的yarn之后,就能正常创建项目了。

但是我还有一个问题没有解决,为什么cli会使用yarn?我这里的cli用的是npm啊。对比~/.vuerc之后,发现我这里的配置是这样的:

{
 // ...
 "packageManager": "npm"
}

他那里的配置是:

{
 // ...
 "packageManager": "yarn"
}

后来听他说,他第一次安装cli的时候,好像选的是yarn……

以上这篇vue项目配置同一局域网可使用ip访问的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
js面向对象方式实现拖拽效果
Mar 03 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 #Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 #Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 #Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 #Javascript
微信小程序canvas动态时钟
Oct 22 #Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 #Javascript
微信小程序入门之绘制时钟
Oct 22 #Javascript
You might like
php下通过POST还是GET来传值
2008/06/05 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
js更优雅的兼容
2010/08/12 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
获取python文件扩展名和文件名方法
2018/02/02 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Python如何输出百分比
2020/07/31 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
大学班级学风建设方案
2014/05/01 职场文书
大学班级文化建设方案
2014/05/06 职场文书
平安建设工作方案
2014/06/02 职场文书
毕业生党员个人总结
2015/02/14 职场文书
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技