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

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

  • 一般纳税人销售货物税率
  • 模具费怎么入账
  • 怎么证明自己是建档立卡贫困户
  • 向投资者分配的现金股利如何做账
  • 个人写的收据要留身份证复印件吗
  • 出纳个人账户转公户
  • 收据可以盖发票专用章吗有效吗
  • 法人投入投资款
  • 个人独资企业变更投资人要交税吗
  • 高温补贴能以别的形式发放吗
  • 成品油进项税转出
  • 货币性短期薪酬影响损益的金额
  • 简易计税项目是所有发票都是普票吗
  • 企业季度所得税资产总额怎么填
  • 税款负担方式是什么
  • 工会发放慰问品总金额超过多少需要比价
  • 固定资产计提折旧的会计科目
  • 个人所得税0元算不算缴税
  • 综合所得收入包括哪些所得项目
  • 进项税和销项税怎么理解
  • 已付款无法收到发票怎么处理
  • 劳务外包收入公式是什么
  • 关闭无法验证发布者
  • 金融负债包括哪几项
  • win7步骤和详细教程
  • python中函数的可变参数有哪几种?各有什么特点?
  • code inspections
  • register.exe - register进程有什么用.是什么意思
  • php字符串变量
  • 冲红的会计分录
  • 产供销一体化什么意思
  • 发票怎么保管不会坏
  • 非货币性资产交换以公允价值为基础进行计量
  • 新西兰南岛西南部
  • php实现文件上传需要使用哪个全局变量
  • 机票报销需要哪些才可以
  • webpack devserver contentbase
  • 发票错开退税款什么时候退回
  • 完整财务报表包括哪几类
  • php策略模式和工厂模式的区别
  • 开了红字信息表对方没开红票
  • 金税盘已作废发票可以取消吗
  • 汇兑损益的现金流量
  • 印花税购销合同包括哪些
  • mysql常用语
  • 多处取得工资薪金
  • 收到预付款发票但是货未到怎么办
  • 交哪些费用
  • 如果企业长期股票怎么办
  • 车船使用税和印花税谁交
  • 商业折让发票如何开
  • 什么是内部报酬吗
  • 公司购买银行理财产品怎么做账
  • 维修费收入怎么结转销售成本
  • 软件开发收费标准
  • 会计错账的更正方法及适用范围
  • 建账初期账务处理程序
  • 以管理员的身份运行是什么意思win10
  • win1021h2版本怎么样
  • linux中的
  • shell 多个文件合并
  • html5画布五角星
  • javascript的基本规范
  • 猫的所有视频
  • easyui导出excel表格
  • jquery选择器的优势有哪些
  • jquery类型转换
  • 编写一个python函数is_multiple
  • 12366纳税服务平台人工时间
  • 差额征税可以全部抵成本么?
  • 我的电脑为什么没有微软商店
  • 保险免保费是什么意思
  • 网上交了购置税你要打印出来吗
  • 买下中国需要多少钱?
  • 智利有什么自然景观
  • 河北省电子税务局手机登录入口
  • 云南国税申报
  • 贵州电子税务总局
  • 通辽这个地方怎么样
  • 怎么查询车船税缴费记录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设