位置: IT常识 - 正文

vue3+vite:本地代理,配置proxy(vue怎么使用本地存储比较好)

编辑:rootadmin
vue3+vite:本地代理,配置proxy

推荐整理分享vue3+vite:本地代理,配置proxy(vue怎么使用本地存储比较好),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue 本地文件,vue本地运行并连接服务器,本地运行vue项目,vue怎么使用本地存储比较好,本地运行vue项目,vue 本地化,vue操作本地文件,本地运行vue项目,内容如对您有帮助,希望把文章链接给更多的朋友!

一、项目:uniapp+vue3+vite+ts

二、配置文件在vite.config.ts

proxy: {'/snow': { // 匹配请求路径,localhost:3000/snowtarget: 'https://www.snow.com/', // 代理的目标地址changeOrigin: true, // 开发模式,默认的origin是真实的 origin:localhost:3000 代理服务会把origin修改为目标地址// secure: true, // 是否https接口// ws: true, // 是否代理websockets// rewrite target目标地址 + '/abc',如果接口是这样的,那么不用重写// rewrite: (path) => path.replace(/^\/snow/, '') // 路径重写,本项目不需要重写}}

三、配置分析

3.1、请求接口

axios.get("/snow/api1");

axios.post("/snow/api2");

3.2、这里本地请求的是:

http://localhost:8080/snow/api1

http://localhost:8080/snow/api2

3.3、这里是请求不到这个接口的,因为本地没有这个接口,所以需要配置proxy

代理后:

https://www.snow.com/snow/api1

https://www.snow.com/snow/api2

代理后的地址是我们想要真正请求的接口地址了。

3.5、rewrite:

rewrite: (path) => path.replace(/^\/snow/, '')

rewrite之后:

https://www.snow.com/api1

https://www.snow.com/api2

vue3+vite:本地代理,配置proxy(vue怎么使用本地存储比较好)

这样丢失了'/snow',所以请求会报错404找不到这个接口。

四、配置env文件

4.1、文件目录

# 请求接口地址VITE_REQUEST_BASE_URL = '/abcd'VITE_SERVER_NAME = 'https://www.abcd.com/'# VITE开头的变量才会被暴露出去

4.2、配置:envDir,配置后可以找到env文件 

 

 envDir: resolve(__dirname, 'env'),

4.3、 拓展环境变量,配置好env相关文件后,在这里拓展后才生效

 4.4、打印env信息

五、根据env文件,配置多环境开发。

loadEnv:可以读取环境变量文件里的内容

vite.config.ts文件获取--mode信息: process.argv.length-1

process.cwd()此方法返回一个字符串,该字符串指定node.js进程的当前工作目录。所以如果环境变量文件在根目录可以使用这个方法。如果和我一样在env目录下,这个方法不可用。这里我使用’./env‘

loadEnv(process.argv[process.argv.length-1], './env').VITE_SERVER_NAME

proxy: {'/m-staff-center': {target: loadEnv(process.argv[process.argv.length-1], './env').VITE_SERVER_NAME,changeOrigin: true,}}

经过测试,接口代理成功。 

六、关注我,一起学习。欢迎交流指正,留言必回。

七、参考链接:

Vue配置文件中的proxy配置_Cerys-zhu的博客-CSDN博客_vue配置proxy

在 vite.config 中使用 env 环境变量 - 简书

在 vite.config 中使用 env 环境变量 - 知乎

vue3 + vite + ts_哔哩哔哩_bilibili-讲的很好

本文链接地址:https://www.jiuchutong.com/zhishi/280509.html 转载请保留说明!

上一篇:win10显示后解压文件损坏怎么办(window10解压)

下一篇:自己给笔记本更换内存条步骤(自己给笔记本更换硬盘)

  • 手机dns在哪里修改(手机dns怎么填写才正确)

    手机dns在哪里修改(手机dns怎么填写才正确)

  • 苹果怎么设置电话铃声(苹果怎么设置电话拦截)

    苹果怎么设置电话铃声(苹果怎么设置电话拦截)

  • 微信设置仅聊天还可以看朋友圈吗(微信设置仅聊天还能看到视频号的内容吗)

    微信设置仅聊天还可以看朋友圈吗(微信设置仅聊天还能看到视频号的内容吗)

  • 合约手机和不是合约手机有什么区别(合约手机不是本人签字可以办理吗有效吗)

    合约手机和不是合约手机有什么区别(合约手机不是本人签字可以办理吗有效吗)

  • 一个淘宝能绑定多少个抖音号(一个淘宝能绑定几个菜鸟)

    一个淘宝能绑定多少个抖音号(一个淘宝能绑定几个菜鸟)

  • 安全原因淘宝限制登录(淘宝因为安全问题被限制登录)

    安全原因淘宝限制登录(淘宝因为安全问题被限制登录)

  • 淘宝不发货赔偿规则(淘宝不发货赔偿多少钱)

    淘宝不发货赔偿规则(淘宝不发货赔偿多少钱)

  • p30蓝牙搜不到耳机(为什么p30无法搜索蓝牙设备)

    p30蓝牙搜不到耳机(为什么p30无法搜索蓝牙设备)

  • 快充跟数据线有关系吗(快充跟数据线有关系吗知乎)

    快充跟数据线有关系吗(快充跟数据线有关系吗知乎)

  • iphone11pro max和11pro区别(iphone11pro max和11屏幕效果对比大吗)

    iphone11pro max和11pro区别(iphone11pro max和11屏幕效果对比大吗)

  • 高性能处理器拒绝访问(高性能处理器英文)

    高性能处理器拒绝访问(高性能处理器英文)

  • 安卓手机呼叫转移在哪里设置(安卓手机呼叫转移在哪里)

    安卓手机呼叫转移在哪里设置(安卓手机呼叫转移在哪里)

  • 优酷app怎样加好友(手机优酷如何添加好友)

    优酷app怎样加好友(手机优酷如何添加好友)

  • 苹果耳机可以和安卓手机配对吗(苹果耳机可以和vivo手机配对吗)

    苹果耳机可以和安卓手机配对吗(苹果耳机可以和vivo手机配对吗)

  • 云计算的部署模型有哪些(云计算的部署模式及服务模式)

    云计算的部署模型有哪些(云计算的部署模式及服务模式)

  • mg4j2ch/a是苹果几(苹果mg4j2cha是什么版本)

    mg4j2ch/a是苹果几(苹果mg4j2cha是什么版本)

  • 怎么取消vsco会员(怎么关掉vsco的续费)

    怎么取消vsco会员(怎么关掉vsco的续费)

  • 夸克链信实名认证如何解绑(夸克链信是国家支持的吗)

    夸克链信实名认证如何解绑(夸克链信是国家支持的吗)

  • 电脑开机怎么进入u盘(电脑开机怎么进入系统重装)

    电脑开机怎么进入u盘(电脑开机怎么进入系统重装)

  • vue怎么设置速度(vuevlog怎么设置速度)

    vue怎么设置速度(vuevlog怎么设置速度)

  • 苹果11几个摄像头(苹果14摄像头)

    苹果11几个摄像头(苹果14摄像头)

  • 拼多多商品详情图尺寸(拼多多商品详情是真实的吗)

    拼多多商品详情图尺寸(拼多多商品详情是真实的吗)

  • airpods可以充一夜吗(airpods可以充着电用吗)

    airpods可以充一夜吗(airpods可以充着电用吗)

  • pafmoo是什么手机(pafm00是什么手机)

    pafmoo是什么手机(pafm00是什么手机)

  • 屏幕进水变暗恢复办法(屏幕进水后屏幕亮度不能升高怎么办)

    屏幕进水变暗恢复办法(屏幕进水后屏幕亮度不能升高怎么办)

  • 联想ThinkPad L380 笔记本Windows10系统改Windows7系统的(联想thinkpad l380yoga)

    联想ThinkPad L380 笔记本Windows10系统改Windows7系统的(联想thinkpad l380yoga)

  • 应交税费课程
  • 股权转让主要交什么税
  • 董事会职权是否为强制规定
  • 物业费的税金是否向业主收取
  • 小规模公司房租费发票税率
  • 展览服务费进项可以抵扣吗
  • 法人可以是办税人和发票领购人吗
  • 公司代收生育津贴怎么做账
  • 人工材料成本怎么分配
  • 企业向个人借款需要交印花税吗
  • 建安发票是什么意思
  • 增值税普通发票有什么用
  • 季度所得税报表季初资产总额怎么填
  • 保险公司联合举办活动
  • 存款利息天数算头不算尾如何计算
  • 公司增资需要什么
  • 影视行业如何盈利
  • 公司缴纳递延所得税吗
  • 如何压缩文件打包发送微信
  • bigfile是什么意思
  • PHP:Memcached::prepend()的用法_Memcached类
  • 运行安装程序时发生错误
  • 财务人员如何审核招待费报销单
  • ajax与php交互
  • 限售股交易征税是多少
  • php消息实时推送完整示例
  • 监事 兼职
  • 财务费用为负数是好事还是坏事
  • fsck命令详解
  • python idle有什么用
  • 劳务费发票为什么必须每月开
  • 成本核算步骤
  • 季度利润表是累计数吗
  • 公司归还股东借款是否需要股东会决议
  • 资产合计数怎么算的
  • 一整天的时间从几点到几点
  • db2运维命令
  • 计提本月应交增值税会计科目
  • 城镇土地使用税每年都要交吗
  • 变动成本法是指什么
  • 增值税附加税包括哪些税种及税率
  • 固定资产的折旧账务处理
  • 营改增后个人所得税计税依据实例
  • 自制半成品属于什么会计要素
  • 小规模纳税人记账报税流程
  • 养老保险和工伤失业保险不在一个时间
  • 无偿划拨土地需要提折旧吗
  • 如何计算政府补贴应摊销
  • 应收账款周转率高说明
  • 土地储备委员会职责
  • 设备投资要开票吗
  • 直接人工标准工时计算公式
  • 网络使用费属于办公费吗为什么
  • 普通发票作废影响额度吗
  • 企业构建固定资产无形资产和其他长期资产支付
  • 有进项无销项如何申报
  • 五金行业怎么开店
  • 汽车几年折旧年限
  • forval命令
  • mysql char函数
  • windows 10 build 9888
  • 制作win7系统安装u盘系统
  • windows使用svn命令
  • linux删除u盘记录
  • quickres.exe - quickres是什么进程 作用是什么
  • win7系统开机出现英文字母
  • win8系统开启摄像头权限
  • iptables配置详解
  • sendmail端口
  • unity ar sdk
  • unity自动攻击
  • js中单例模式
  • nodejs爬虫技术
  • android list
  • net命令大全
  • javascript要怎么学
  • 如何配置centos7
  • 房产税什么时候开始征收
  • 车辆购置税查询不到
  • 重置税务密码
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设