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 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
详解JavaScript 高阶函数
Sep 14 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 eval函数用法总结
2012/10/31 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
js读取cookie方法总结
2014/10/31 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
介绍一下Ruby的多线程处理
2013/02/01 面试题
应届生骨科医生求职信
2013/10/31 职场文书
大学专科生推荐信范文
2013/11/23 职场文书
cf收人广告词大全
2014/03/14 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
2016国培研修心得体会
2016/01/08 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS