Vue前端连接本地后端进行调试方法

最新推荐文章于 2024-05-23 16:41:16 发布
最新推荐文章于 2024-05-23 16:41:16 发布
阅读量3k 收藏 8
点赞数 1
分类专栏： java开发 文章标签： 前端 vue.js javascript bug idea
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49121426/article/details/125281518
版权

Vue前端连接本地后端进行调试方法

1.F12查看后台源代码

在这里插入图片描述

2.切换到控制台

配置localStorage.baseUrl为自己本机ip及端口即可。

localStorage.baseUrl='http://10.41.32.20:8081/'

得到连接成功响应如下
在这里插入图片描述

3.后端得到响应即成功

在这里插入图片描述

柜子里呢7k7k
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目中，多位后端开发人员时，避免联调时重复改IP，将各位开发人员的地址进行配置，只需启动不同配置即可
进击的冉冉的博客
07-29 893
背景 在一个大型的项目开发过程中，作为一个前端开发人员，很可能存在需要与多为后端开发人员进行本地联调，为了避免重复去修改本地的接口地址，故可以将各个后台开发人员的本地接口接口地址配置进配置项，一般不需要重复修改。 步骤 1). vue项目中，启动本地开发环境时命令为npm run dev,在package.json中可看见配置的启动命令： 根据这个我们可以配置后台开发人员的本地接口的启动命令，...
vue连接后端本地接口_详解vue配置后台接口方式
weixin_40004502的博客
12-20 8206
详解vue配置后台接口方式在vueAdmin项目中有两种方式配置后端接口的方式，在此做下记录第一种(代理方式)在工程目录下 > config > index.js- 修改为如下配置proxyTable: {'/api': {target: 'http://127.0.0.1:8000',pathRewrite: {'^/api': ''}}},在工程目录下 > src > ...
前端vue2与后端接口的简单联调步骤
最新发布
qq_70786441的博客
05-23 595
创建俩个包 utlis 和api（不确定谁便起）再在包里创文件夹 request.js impus.js。import create from "../utils/request"把request.js调过来。baseURL:"http://localhost:8083",自己后端的端口号。timeout:5000后端传给前端的时间。在 request.js把axios调过来。安装axios npm i axios。impus.js里写的是接口。在main.js里写。在main.js里写。
vue前端项目如何配置后端项目的请求地址
m0_69057918的博客
11-22 6973
vue前端项目配置后端项目的请求地址
vue连接本地服务器
大道至简
12-29 914
vue,js连接本地服务器
vue结合后端本地上传文件
Rainy_X的博客
07-01 680
//按钮 <a-upload :beforeUpload="beforeUpload" :showUploadList="false"> <a-button type="primary" icon="upload">导入</a-button> </a-upload> <a-button @click="downExcel" type="primary" icon="download">导出</a-bu
【第5期】前端Vue使用Proxy+Vuex(store、mutations、actions)跨域调通本地后端接口
朱晓龙的博客
12-31 1226
本期要点 1. 本地开发前后端如何跨域调用 2. 全局请求、响应处理拦截器处理 3. 封装HTTP请求模块 4. 编写API请求映射到后端API 5. 数据的状态管理
研究生java大作业，考勤系统大作业，vue前端+springboot后端.zip
10-16
研究生java大作业，考勤系统大作业，vue前端+springboot后端.zip 1、该资源内项目代码经过严格调试，下载即用确保可以运行！ 2、该资源适合计算机相关专业(如计科、人工智能、大数据、数学、电子信息等)正在做课程...
基于vue前端+springboot后端的考勤系统大作业（研究生java大作业）.zip
01-10
基于vue前端+springboot后端的考勤系统大作业（研究生java大作业）.zip 基于vue前端+springboot后端的考勤系统大作业（研究生java大作业）.zip 基于vue前端+springboot后端的考勤系统大作业（研究生java大作业）.zip...
基于vue-admin和后端flask分离结合的超简单模板
02-25
5. **JSON序列化和反序列化**：Flask后端与Vue前端交互时，数据通常以JSON格式交换，Flask提供jsonify函数进行JSON序列化，前端则通过JavaScript内置方法解析JSON。 6. **安全与认证**：可能需要集成JWT（JSON Web ...
爱吃火锅点餐小程序由小程序端和管理端构成，前端用Vue+Elementui，后端用SpirngBoot+MyBatis.zip
11-13
爱吃火锅点餐小程序由小程序端和管理端构成，前端用Vue+Elementui，后端用SpirngBoot+MyBatis.zip主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部...
Vue CLI 使用 npm webpack 打包发布 + Asp.net Web Api 后端调试
lee576的专栏
09-07 770
npm 调试命令 npm run dev很简单，我们都知道。那么怎么调用并调试.net Web Api接口呢.先看看 node.js环境下前端如何配置吧 一.首先我们说说如何在 npm run dev命令下，也就是开发模式下去调用 .net Web Api后端接口去联调。 1. 打开 config文件夹下的 index.js，如下图所示 其中有个很关键的地方，那就是配置节proxyTable ，这其中 target就是后端Web Api的地址，至于这个地址...
一篇看懂 vue 如何做调试后台接口的配置和 proxy 的工作原理 以及为什么能解决跨域
c327127960的博客
03-01 4790
之前也做过不少vue项目了，每次跟后台配合的时候，有些配置总是会忘记，感觉每次的解决方案和上一次的都不一样，所以这次准备详细的记录一下，如何做配置，以及一些配置的含义 话不多说 直接开始 1.首先要想调取后台接口一定要引入的就是axios，所以第一步就是下载 axios npm install axios 2.在需要调用接口的页面引入axios import axios from 'axios' 2.1发送请求 axios({ method: "post", url: "
在vue中使用three.js 1.0--本地搭建Threejs官方文档网站
m0_50207524的博客
03-30 365
threejs官方文档在使用threejs 会出现官网加载比较慢和白屏的情况，本地搭建threejs官网可以很好的解决这个问题。
vue 解决跨域 调试_vue-cli中vue本地实现跨域调试接口
weixin_39736650的博客
12-20 583
使用vue的同学们大都是基于vue-cli来搭建项目的，vue-cli中的配置全面强大。// 常用的命令npm run dev // 本地热更新模式npm run build //生产模式 会在根目录下打包出一个dist文件夹，直接放在服务器上就可以使用了开发阶段与后台同学进行数据交互(调试接口) 本机与服务器之间会出现跨域问题跨域报错解决办法在npm run dev执行后，项目会在本地node中...
【非同局域网】vue调取本地后台服务解决方法
qq_33645786的博客
03-29 1271
在紧张刺激害怕的居家办公中，我发现，我的网连不上公司要用的vpn，这也就导致我每次发布都要找领导吧我的代码从git上下载到他的电脑里，然后再上传到服务器，前端再进行调取，我还要看着服务器的日志去改错误，改完又要重复这个操作…我其实无所谓主要我BUG太多怕领导打我，于是变有了这个方法。 其实原理就是让两台电脑以为自己在一个局域网中就OK了，哪我们只要使用VPN让两个电脑产生这种错觉就OK了 使用TeamViewer软件可以轻松实现这个目标，本来是用来远程桌面的但是… 在设置>高级>安装vpn驱
谷歌浏览器调试：添加localStorage
鼓浪屿岛与海的博客
11-16 4249
F12查看浏览器本地：Local Storage 需要添加一个key: default_system 设置如下： 查看浏览器localStorage： window.localStorage 设置localStorage： localStorage.setItem("default_system","Aone") 查看效果： ...
Vue3+ThreeJS的简单使用
无敌暗黑暴龙神的博客
12-21 8869
Vue3中简单使用Three.js,步骤清晰,一看就会
前端 Vite 详细介绍
06-12
前端Vite是一个基于ESM（ES Modules）的构建工具，旨在提供快速的开发服务器和构建工具，以加快前端应用的构建速度。它由Vue.js的作者尤雨溪开发，原本是Vue.js 3.0的开发工具，在发布后得到了广泛的关注和应用。 前端Vite的特点包括： 1. 快速的开发服务器：前端Vite提供了一个快速的开发服务器，可以实现快速的冷启动和热重载，从而提高了开发效率。开发者在本地开发时，只需要运行一个Vite命令，就可以启动一个开发服务器，自动打开浏览器，并且在修改代码后实时更新页面。 2. 模块热替换（HMR）：前端Vite支持模块热替换（HMR）功能，可以在开发过程中实时预览和调试应用程序。当开发者修改了代码后，Vite会快速地重新构建应用程序，并将新代码注入到正在运行的应用程序中，从而实现了实时预览和无需刷新的调试。 3. 支持TypeScript、Less、Sass等常见的前端开发语言和预处理器：前端Vite可以处理TypeScript、Less、Sass等常见的前端开发语言和预处理器，并提供了一些内置插件来处理这些文件类型。开发者只需要在项目中安装相应的依赖，Vite会自动处理它们。 4. 可扩展性：前端Vite支持自定义插件，并提供一些API和钩子来扩展其功能。开发者可以根据自己的需求编写插件，从而扩展Vite的功能。 5. 简单的配置文件：前端Vite的配置文件非常简单，只需要一个vite.config.js文件，便可以配置开发和构建相关的所有选项。开发者可以根据自己的需求，添加自定义的配置项，从而满足不同的需求。 总的来说，前端Vite是一个快速、易用性和可扩展性的构建工具，可以为前端开发者提供快速、高效的开发体验，并且可以与Vue.js、React等常见的前端框架进行无缝集成。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值