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 CSS样式控制 学习笔记
Jul 23 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
jQuery返回定位插件详解
May 15 jQuery
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 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中的正规表达式(一)
2006/10/09 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
QQ登录简单实现代码
2021/03/09 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python实现翻转数组功能示例
2018/01/12 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
使用python求解二次规划的问题
2020/02/29 Python
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
先进个人事迹材料
2014/01/25 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
爱国主义演讲稿
2014/05/07 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
个人道歉信大全
2019/04/11 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
python中print格式化输出的问题
2021/04/16 Python
新手初学Java网络编程
2021/07/07 Java/Android
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
Nginx HTTP跳转至HTTPS
2022/05/15 Servers