vue项目局域网前后端接口对接相关设置
创始人
2025-05-31 02:20:16

场景： 项目开发中，当前没有服务器，或感觉每次部署包麻烦的，可以本地调试。
项目：vue + webpack 内网环境下

第一步 ： 防火墙入站规则

电脑 左下角搜索 防火墙

点击高级设置
在这里插入图片描述
点击入站规则 右键新增
在这里插入图片描述
选择TCP端口 下一页
在这里插入图片描述
写入你的前端web服务的端口 如果省事直接所有端口
在这里插入图片描述
下一步
在这里插入图片描述
再下一步
在这里插入图片描述
为你本条规则起个名字 ，和已存在的不重复即可 方便管理
在这里插入图片描述

第二步 项目设置

      查看本机ip   win + r   输入cmd   打开后 输入ipconfig ,  查看  IPv4 地址。vue项目中1.  config /dev.env.js 文件中TARGET值， 写入ip地址  例如： http://11.111.11.11:8080/port index.js文件中 dev:{  } 配置中设置代理

    proxyTable: {'/port': {target: '后台接口ip:端口',changeOrigin: true,pathRewrite: {'^/port': ''}}},host: '自己本机的ip', // port: 8080, 和上面一致

接下来启动服务， 使用ip在chrome浏览器中，发现还是无法访问。
百度发现： 是webpack 固定了本地前端服务的ip 只能local host和127.
进入package.json中
webpack-dev-server后面，加一句–host 0.0.0.0

"scripts": {
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",

再次启动，可以了。

后台开发接口，也是同样。这样局域网下的电脑就可以项目访问本地服务，这样不用部署也可以和线上同样的效果。

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：选择器（设置样式的元素）

下一篇：「操作系统」什么是用户态和内核态？为什么要区分

相关内容

热门资讯

代码随想录刷题-哈希表-两数之... 文章目录两数之和习题暴力解法哈希表 两数之和 本节对应代码随想录中：代码随想录...
凌恩生物明星产品：让你读懂细胞... 叶绿体和线粒体是真核细胞中不可或缺的重要细胞器，是第二套遗传信息系统，与...
密码如何“加盐加密”处理？程序... 目录 前言 一、手写加盐算法 1.1、加密 1.1.1、加密思路 1.1.2、加密简图 1.1.3、...
黑化什么意思网络用语 极速百科... 黑化，词语，也可指性情大变，比如原本某A是个文青，温文尔雅，突然某天某A大开杀戒，残忍无比，这就是所...
带有古和今的成语,古今的对话：... 带有古和今的成语有很多，例如：古为今用、古往今来、古稀之年、古今中外等等。这些成语都包含了古代和现代...
能力强的人有什么特点,标题建议... 能力强的人往往具备以下特点： 1. 学习能力：能力强的人通常能够快速学习新知识和技能，并能够灵...
跑步机怎么操作大图 极速百科网... 1. 启动跑步机：首先，确保跑步机已经插上电源，然后打开跑步机的电源开关。大多数跑步机都有一个启动/...
ELK+Filebeat+Ka... 文章目录ELK+Filebeat+Kafka分布式日志管理平台搭建为什么选择ELK&...
哈希结构的代码实现（开散列、闭... 哈希结构 unordered系列的关联式容器之所以查找效率比较高，是因为其底层使用了哈...
Java Annotation... 注解 注解（Annotation），又称元数据ÿ...
bim装配式工程师证书有用吗,... 首先，我们需要明确一点，那就是BIM装配式工程师证书肯定是有用的。这个证书证明了持有人掌握了BIM技...
什么东西可以深层清洁毛孔 极速... 首先，我们要明白，毛孔的深层清洁不仅仅是指清洁面部皮肤，还包括清洁身体和头发的毛孔。接下来，我将为你...
vip全称 极速百科网 极速百... VIP的英文全称为Very Important Person，中文翻译为重要人物、要员。一般指VIP...
公共交通工具有哪些 极速百科网... 1. 城市公交：这是大家最熟悉的公共交通工具之一，提供在城市内部的运输服务。公交车根据不同的大小和座...
智能火焰与烟雾检测系统（Pyt... 摘要：智能火焰与烟雾检测系统用于智能日常火灾检测报警，利用摄像头画面实时...
【学习笔记】《Writing ... 文章目录14 Energizing Writing 充满活力的写作14.1. ACTIVE VERS...
基于R语言因果关系推断模型实践... 通过数据得到可靠的因果关系一直是科学研究的主要目标之一。对因果关系的研究已经有千年之久；...
手机qq里怎么分组,手机QQ分... 1. 打开QQ应用，进入联系人界面。 2. 找到你想要分组的联系人或群聊。 3. 长按想...
带指的成语有哪些 极速百科网 ... 指日高升、一指蔽目、屈指可数、十指连心、三指佞臣、染指垂涎、戟指怒目、屈指可数。 如需更多含有...
第十八天 Vue-前端工程化总... 目录 Vue-前端工程化 1. 前后端分离开发 1.1 介绍 1.2 Yapi 2. 前端工程化 2...
急用钱公积金怎么提现,公积金提... 1. 了解公积金提现的条件和手续。在您考虑提现之前，请务必了解您所在地区的具体规定和要求。通常，您需...
杯子刻字励志八个字,志存高远，... 杯子刻字励志八个字建议如下： 1. 志存高远，自强不息。 2. 持之以恒，锐意进取。 ...
YOLOV4详解 1. 为什么要学习YOLOV4? 通过学习YOLOV3这个很重要的算法, 可以学习到作者重新设计Da...
提高曝光率：外贸网站如何充分利... 自从我从事外贸行业以来，谷歌优化一直是我关注的重点。 作为一个外贸从业者，...
Vue3 学习总结补充（一） 文章目录1、Vue3中为什么修改变量的值后，视图不更新？2、使用 ref...
锤哥和锤弟是双胞胎吗,锤哥和锤... 锤哥和锤弟是双胞胎吗？锤哥和锤弟这两个名字可能只是表示两个有亲属关系的人，而并不一定表示他们是双胞胎...
ido什么意思,IDO：意义、... IDO全称“I Do”，源自婚礼誓言，意为“我愿意”。表达对爱情的坚守。IDO钻戒的寓意是珍视爱情的...
形容夜色美的唯美句子,夜色的魅... 1. 夜幕降临，华灯初上，整个城市被柔和的灯光笼罩，宛如一颗璀璨的明珠。 2. 夜色中的星空，...
已婚女人梦见龙预示有什么征兆,... 已婚女人梦见龙，一般来说，是一种非常吉祥的预兆。在中国传统文化中，龙象征着富贵、吉祥和好运。 ...
2022国赛2：神州路由器pp...       PPP Multilink协议（MP）是PPP（...