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 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
Javascript & DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
jquery 锁定弹出层实现代码
Feb 23 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
一个加载js文件的小脚本
2007/06/28 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
jQuery设计思想
2017/03/07 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
python模块如何查看
2020/06/16 Python
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
大学生入党自荐书
2015/03/05 职场文书
党小组考察意见
2015/06/02 职场文书