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 相关文章推荐
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
基于node.js制作简单爬虫教程
Jun 29 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内存缓存Memcached类实例
2014/12/08 PHP
PHP常用的三种设计模式
2017/02/17 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
nodejs win7下安装方法
2012/05/24 NodeJs
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
python处理中文编码和判断编码示例
2014/02/26 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
python模块如何查看
2020/06/16 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
2014年终个人工作总结
2014/11/07 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
借条如何写
2015/05/26 职场文书
工作会议简报
2015/07/20 职场文书