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 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
js实现指定时间倒计时效果
Aug 26 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
浅谈Web Storage API的使用
Jun 23 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 MessagePack介绍
2013/10/06 PHP
php中apc缓存使用示例
2013/12/25 PHP
php获取系统变量方法小结
2015/05/29 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
js中less常用的方法小结
2017/08/09 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
Python 数据结构之旋转链表
2017/02/25 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
python re.match()用法相关示例
2021/01/27 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
美国零售商店:Blue&Cream
2017/04/07 全球购物
环境科学专业个人求职信
2013/12/15 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
新年联欢会主持词
2014/03/27 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
安全保证书怎么写
2015/02/28 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
Python如何让字典保持有序排列
2022/04/29 Python