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

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

  • 小米mix4充电模式怎么选(mix4 充电)

    小米mix4充电模式怎么选(mix4 充电)

  • wps上标数字怎么打(wps文档上标数字怎么打)

    wps上标数字怎么打(wps文档上标数字怎么打)

  • 苹果不激活能连接爱思助手吗(苹果激活不连wifi可以么)

    苹果不激活能连接爱思助手吗(苹果激活不连wifi可以么)

  • 荣耀v30双卡怎么装(荣耀v30怎么插两张卡)

    荣耀v30双卡怎么装(荣耀v30怎么插两张卡)

  • 2510接触器能带多少kw(2510接触器能带多少kw220)

    2510接触器能带多少kw(2510接触器能带多少kw220)

  • 抖音怎么删除购物痕迹(抖音怎么删除购买订单记录)

    抖音怎么删除购物痕迹(抖音怎么删除购买订单记录)

  • 苹果手机微信锁屏后没有声音提示(苹果手机微信锁屏没有提示音怎么回事)

    苹果手机微信锁屏后没有声音提示(苹果手机微信锁屏没有提示音怎么回事)

  • 蓝牙aptx重要吗

    蓝牙aptx重要吗

  • 华为mate30备忘录在哪里(华为mate30备忘录怎么做表格)

    华为mate30备忘录在哪里(华为mate30备忘录怎么做表格)

  • 快手隐私用户是所有人都看不到吗(快手隐私用户是什么意思)

    快手隐私用户是所有人都看不到吗(快手隐私用户是什么意思)

  • 笔记本怎么下载歌曲到u盘(笔记本怎么下载app并安装)

    笔记本怎么下载歌曲到u盘(笔记本怎么下载app并安装)

  • 抖音发言太快多久恢复(抖音发言太快了,请你控计里需要多久才能重新)

    抖音发言太快多久恢复(抖音发言太快了,请你控计里需要多久才能重新)

  • 学而思退款什么时候到账(学而思退款退到哪里)

    学而思退款什么时候到账(学而思退款退到哪里)

  • 被称为裸机的是指(所谓“裸机”是)

    被称为裸机的是指(所谓“裸机”是)

  • 抖音里隐藏无效视频是什么意思(抖音里隐藏无效账号)

    抖音里隐藏无效视频是什么意思(抖音里隐藏无效账号)

  • 什么是h5页面制作(h5页面制作的技巧和规范介绍)

    什么是h5页面制作(h5页面制作的技巧和规范介绍)

  • 如果微信聊天记录删了可以找回吗(如果微信聊天记录删除了怎么恢复)

    如果微信聊天记录删了可以找回吗(如果微信聊天记录删除了怎么恢复)

  • 华为手机四个摄像头是什么型号(华为手机四个摄像头手机有哪几款)

    华为手机四个摄像头是什么型号(华为手机四个摄像头手机有哪几款)

  • 哔哩哔哩卡取消订单(哔哩哔哩办的卡怎么取消)

    哔哩哔哩卡取消订单(哔哩哔哩办的卡怎么取消)

  • 手机花呗收款怎么开通(手机花呗怎么收款)

    手机花呗收款怎么开通(手机花呗怎么收款)

  • 荣耀20青春版采用什么处理器(荣耀 20青春版)

    荣耀20青春版采用什么处理器(荣耀 20青春版)

  • oppo a9有没有呼吸灯(oppoa9手机呼叫限制怎么解除)

    oppo a9有没有呼吸灯(oppoa9手机呼叫限制怎么解除)

  • oppor15有nfc功能吗(oppor15有nfc功能没)

    oppor15有nfc功能吗(oppor15有nfc功能没)

  • 怎么查看优酷会员到期(怎么查看优酷会员登录几个设备)

    怎么查看优酷会员到期(怎么查看优酷会员登录几个设备)

  • onc键的功能是什么(on键是什么)

    onc键的功能是什么(on键是什么)

  • win10最新2021激活秘钥分享 电脑系统激活序列号推荐 附激活工具(windows10最新激活密钥2020)

    win10最新2021激活秘钥分享 电脑系统激活序列号推荐 附激活工具(windows10最新激活密钥2020)

  • 电脑怎么更新系统?有什么办法可以更新?(电脑怎么更新系统日期)

    电脑怎么更新系统?有什么办法可以更新?(电脑怎么更新系统日期)

  • php返回json数据(php返回json数据交给js读出来是数字,不是字符串)

    php返回json数据(php返回json数据交给js读出来是数字,不是字符串)

  • 一般纳税人开普票税率是3%还是13%
  • 境外企业在中国境内承包建筑工程应在
  • 增值税普通发票税率
  • 新公司和旧公司对比
  • 房地产预缴增值税是含税还是不含税
  • 个体户城市维护建设税减免性质
  • 装修工程人工费占总价比例
  • 劳务公司开出发票3年未收到钱
  • 经营活动现金流增加的原因
  • 应付账款暂估会计处理
  • 物业企业门禁卡如何记账?
  • 施工企业项目管理办法
  • 供热企业采暖费收入免征增值税政策解读
  • 交易性金融资产入账价值怎么计算
  • 支付运费价税合计
  • 老会计有多厉害
  • 以前工会是没有公章的吗
  • 公司工会有税号吗
  • 4800的个人所得税
  • 为什么增值税不影响利润
  • 垫付的工程款可以起诉要回吗
  • 购销合同怎么签订
  • 超市买的东西开什么发票
  • 借 其他应付款
  • 纳税人不得汇总开具发票
  • 修改远程桌面端
  • 购进材料用于在建工程进项税
  • 现代服务业包括哪些
  • 如何禁用开始目录的app自动推荐
  • 电脑桌面换壁纸的软件
  • mom.exe是什么进程
  • 秋分日的时间意义庆祝方式
  • php的curl实例
  • php执行sh脚本
  • laravel框架用到哪些设计模式
  • 西部大开发的主要政策措施是什么?
  • php和apache
  • php语言之面向对象编程 educoder
  • 分公司股东怎么填
  • php -v
  • python爬虫推荐
  • 应付款项怎么填列
  • 劳务公司账务处理流程简易计税
  • 房产原值是否含增值税
  • 帝国cms下载
  • phpcms怎么修改模板风格
  • python的协程
  • 有什么学电脑的网站
  • 材料采购与原材料账户核算内容有何差别
  • 河南巩义黄河治理项目土方工程有哪些
  • 甲供材甲方如何缴纳增值税
  • 典当行借款合同需交印花税吗
  • 经营租赁筹建期怎么计算
  • 企业自有房产的认定标准
  • 工程结算直接做主营业务成本
  • 研究费用怎么做账
  • 工会赞助费
  • 收到现金怎么做凭证
  • 购买专利后有占有权吗
  • 企业自建房屋建设方案
  • 银行存款日记账怎么记账
  • 购买服装费用计入什么科目
  • 积分中的换元怎么使用
  • 公司年初计划都有哪些
  • 磁盘缓存技术
  • mysql5.7.22安装教程图解
  • MySQL使用show status查看MySQL服务器状态信息
  • 苹果电脑mac系统怎么用
  • windows7怎么说
  • windows注册账号
  • Linux编译内核无法启动
  • Win10 RS1 14267 SDK版本发布下载
  • cocos2dx 3.5 ”hello world“解析
  • [置顶] 《借.住.情.缘》
  • flask开发实例
  • javascript参考书
  • js 页面加载
  • android 调用相机拍照
  • 出版社税费多少
  • 个体工商户税收起征点是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设