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 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
js加强的经典分页实例
Mar 15 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 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
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
关于this和self的使用说明
2010/08/01 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
ES6 十大特性简介
2020/12/09 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
打包发布Python模块的方法详解
2016/09/18 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
阿巴庭院:Abba Patio
2019/06/18 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
信用社员工先进事迹材料
2014/02/04 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书