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中的$(document).ready()与window.onload的区别
Nov 18 Javascript
jQuery 工具函数学习资料
Apr 29 Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
js中的数组对象排序分析
Dec 11 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
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显示MySQL数据的三种方法
2008/06/05 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
python 数据加密代码
2008/12/24 Python
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python解析xml中dom元素的方法
2015/03/12 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
RealTek面试题
2016/06/28 面试题
酒店管理专业毕业生推荐信
2013/11/10 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
单位承诺书格式
2014/05/21 职场文书
统计学教授推荐信
2014/09/18 职场文书
三好学生个人总结
2015/02/15 职场文书
社区党员干部承诺书
2015/05/04 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
公司宣传语大全
2015/07/13 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python