首页 > 其他分享 >Vue 调试访问本地后端接口配置

Vue 调试访问本地后端接口配置

时间:2023-06-09 14:44:52浏览次数:47  
标签:VUE env APP 接口 访问 BASE Vue 本地 调试

记录一下本地测试前端的时候怎么访问本地后端接口。时间太长容易忘。。。。

1、首先要知道前端在访问后端的时候是怎么加上后端接口地址的。

如下图,找到封装http请求的文件,src/utils/rerquest.js
该图中的baseURL就是访问时我们加上的后端请求地址。
baseURL: process.env.VUE_APP_BASE_API 表示baseURL使用的是环境变量中的VUE_APP_BASE_API这个参数

image

在本地测试前端的时候使用的命令一般都是npm run dev
然后dev使用的默认环境变量文件是 .env.development
简单来说,只要在.env.development中配置了VUE_APP_BASE_API参数,那么在本地测试的时候默认使用的后端地址就是在这个文件中配置的地址。
image

标签:VUE,env,APP,接口,访问,BASE,Vue,本地,调试
From: https://www.cnblogs.com/shangcc205/p/17469174.html

相关文章

  • #Vue-cli 5 怎么打印代理地址 #Vue-cli 5 怎么查看真是请求地址 ?
    proxy:{'/api':{target:'http://192.168.3.47:1228',changeOrigin:true,onProxyReq:function(proxyReq,req,res){console.log('[proxy]:'+proxyReq.getHeader('origin')+proxyReq.p......
  • 在线数据库常用接口整理
    domain_base64*2= YUhSMGNITWxNMEV2TDNkM2R5NWphR0Z2YW1saWFXRnZaMlV1WTI5dA==这是一个神奇的网站,调用接口可以方便的实现增删改查。修改www前缀为vip,可能会更稳定些我常常用来写入程序的日志记录,记录/更新一些关键key特色是不需要鉴权,表格ID和行ID形成开然的token整理了些......
  • 接口防刷处理方案,太优雅了!
    来源:juejin.cn/post/7200366809407750181前言本文为描述通过Interceptor以及Redis实现接口访问防刷Demo这里会通过逐步找问题,逐步去完善的形式展示原理通过ip地址+uri拼接用以作为访问者访问接口区分通过在Interceptor中拦截请求,从Redis中统计用户访问接口次数从而达到接......
  • elementui局部全屏无法显示tooltip,popover等基于vue-popper类开发的组件
    因为这些元素都是插入到body里面的,而当某一div全屏后由于层级原因无法显示这些组件,解决办法如下首先append-to-body设置为false然后手动将弹出内容添加到想要的位置即可......
  • Vue路由的基本使用
    1、相关理解1.1vue-router的理解vue的一个插件库,专门用来实现SPA应用的1.2对SPA应用的理解1、单页Web应用(singlepagewebapplication,SPA)2、整个页面只有一个完整的页面。index.html3、点击页面中的导航链接不会刷新页面,只做页面的局部更新4、数据需要通过ajax请求获取......
  • vue+elementUI 搜索栏公共组件封装,封装多搜索条件通用组件,超实用
    1、新建BaseSearch.vue文件<!--*名称:弹窗的搜索条件组件*功能:methods1.点击搜索的方法:@search2.搜索条件props:formItemList--><template><divclass="dialog-search"><el-form:inline="true"ref="......
  • RK3588-WIF/BT调试之AP6256
    一、简介AP6256是正基科技推出的一款低成本,低功耗的双模模块。是一款SDIO接口单通道802.11ac双频支持BT5.0蓝牙WiFi二合一模块。Model:AP6256:SDIOWIFI+UARTBTChip:BCM43456WiFi: 2.4G&5GBT:5.0WIFIThroughput:up:196Mbits/secdown:187Mbits/sec二、DTS配置2.1配置SDIO/*SDIO......
  • 可能是最简单最通透的Comparable和Comparator接口返回值理解
    先说Comparator接口,这个理解了,下一个就理解了一、Comparator的用法(暂不考虑0,因为0不处理)返回-1,1交换不交换位置,如果撇开比较器的两个参数和jdk默认顺序来说,存粹是错误的接口如下:原文链接publicinterfaceComparator<T>{intcompare(To1,To2);}现提出如下......
  • Vue脚手架配置代理
    前言前端在向后端请求资源时通常会遇到跨域问题,当我们是用vue脚手架构建项目时,可以通过配置代理解决跨域问题参考文档:devServer.proxy方法一:在vue.config.js中添加如下配置:module.exports={devServer:{proxy:'http://localhost:4000'}}说明:(1)、优点:配置简......
  • vue3+ TS pinyin uniapp 索引列表-(A-Z)按首字母排序 ,锚点定位
    获取一维数组地址列表<scriptlang="ts"setup>import{getLocationList}from"@/apis/activity";import{onLoad}from"@dcloudio/uni-app";import{pinyin}from"pinyin-pro"import{ref}from"vue";const......