位置: 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解压)

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

  • 增值税认证发票平台可以导出发票明细吗?
  • 增值税普通发票有什么用
  • 每年税务师考试几次
  • 百望云票收费吗
  • 所得税汇算清缴分录怎么做
  • 残保金每次缴纳都是一样的吗
  • 公司已倒闭
  • 公司转让住房是什么意思
  • 货物出口到保税区复进口
  • 存在弃置费用的固定资产有哪些
  • 冲销已结转的成本
  • 员工外出培训报告怎么写
  • 归属于母公司的净利润怎么来的?
  • 交易性金融资产入账价值怎么计算
  • win10更新补丁怎么关闭
  • 跨年度增值税发票作废怎么退税
  • 文化事业建设费2023年是否减免了
  • Win11文件夹怎么加密设置密码
  • wifi密码忘记了怎么重新设置密码
  • 定额发票收入怎么样确定
  • PHP:mb_parse_str()的用法_mbstring函数
  • 木星应该涂什么颜色
  • 印花税需要交钱吗
  • 债务重组亏损计入
  • Joomla调用系统自带编辑器的实现方法
  • ros算法
  • 赡养老人专项附加扣除标准2023年
  • 前端开发做什么副业
  • 融资租赁的残值归出租人所有,为啥要减去租金限值
  • 往来款的意思
  • 增值税申报系统登录密码
  • 深入了解jvm
  • jsp连接数据库的步骤
  • 增值税普票怎么开演示
  • 没有数字的公章有效吗
  • 购买原材料运输费的增值税计入什么科目
  • 固定资产折旧加计扣除最新政策
  • 暂估和冲暂估分录
  • 机会成本的特点有()
  • 如何编制试算平衡表图示
  • 投资收益算在营业利润里面吗
  • 购买展示样品是指什么
  • 业务招待费的扣除标准60%什么意思
  • 财务费用为零的原因
  • 经费开支要求
  • 购入房屋建筑物进项税额抵扣
  • 员工预支工资属于什么科目
  • 小规模纳税人可以抵税吗
  • 会务费入哪个科目
  • 原始凭证怎么粘
  • dos命令环境
  • 如何保证系统异常状态
  • Windows 2003作中转VPN服务器多路由共享上网的方法
  • Windows Server 2008作为打印服务器排错
  • 脱机文件怎么办
  • ghost怎么安装gho文件
  • win10截图截不了怎么办?
  • centos6.5破解密码
  • 升级win102004
  • vsftpd.log
  • windows8飞行模式怎么关
  • [置顶]bilinovel
  • 深入理解linux系统
  • 批处理书
  • python如何精确小数
  • django分层
  • selenium自动化步骤
  • dos 改名
  • android 点击按钮如果数据库有数据就更新,没有就创建
  • 又一枚精彩的弹幕效果jQuery实现
  • android系统内核基于什么操作系统?
  • 一个android项目一般包含哪些目录?各有什么用途?
  • 合肥地税局客服电话
  • 国家税务总局官网电子税务局
  • 如何查询车辆购置税完税证明
  • 西安养老保险申报
  • 房产税纳税义务时间
  • 什么是私人帐户
  • 苏州汇川和深圳汇川那个好
  • 怎么删除天眼查的犯罪记录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设