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 定时器调用传递参数的方法
Nov 12 Javascript
actionscript与javascript的区别
May 25 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
JS实现音乐导航特效
Jan 06 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 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使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
《Python学习手册》学习总结
2018/01/17 Python
python求质数的3种方法
2018/09/28 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
python retrying模块的使用方法详解
2019/09/25 Python
Python实现分数序列求和
2020/02/25 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
简单的Python人脸识别系统
2020/07/14 Python
学python爬虫能做什么
2020/07/29 Python
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
市场营销个人求职信范文
2014/02/02 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
历史学专业求职信
2014/06/19 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
幼师个人总结范文
2015/02/28 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers