Vite项目中根据不同打包命令配置不同的后端接口地址，proxy解决跨域

已于 2024-07-29 02:04:38 修改
阅读量872 收藏 1
点赞数 3
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： 前端 vue
于 2024-07-29 00:07:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaobai_cpp/article/details/140758846

在vite.config.ts同级目录添加两个文件

.env.development

#开发环境
VITE_APP_ENV = 'development'

VITE_APP_BASE_API = ''

.env.production

#生产配置
VITE_APP_ENV = 'production'

VITE_APP_BASE_API = 'https://www.bdjw.work'

代码中使用路径

const request = axios.create(
最低0.47元/天 解锁文章
vite项目配置根据不同的打包环境使用不同的请求路径VITE_BASE_URL，包括报错解决
02-07 5172
在项目根目录下面创建.env和.env.production文件，.env是开发环境使用的，.env.production是生产环境使用的。比如配置axios请求的时候，要修改url地址。
Vite如何区分不同环境的不同后端地址
qq_41599080的博客
05-10 1477
vue项目部署问题
vue3 vite 后端地址配置
oMangGuoBuDing1的专栏
05-16 2370
下面这段加完之后可以在浏览器打印上看到 真实请求的后端地址，否则f12网络看到的只是浏览器的ip和端口号，我因为这个一直以为配置不能生效呢，后来想到可能只是不显示真实地址，因为换了好几个框架都是不行但改完这个地址 网页数据就加载不到了想到的。// 将真实请求地址设置到响应头中。
vue3+vite配置.env文件环境变量
最新发布
2401_82591622的博客
05-25 976
通过合理配置.env文件，可以有效管理项目中的环境变量，确保在不同环境下应用的正确运行和安全性。以下是一些关键点：（1）使用和.env.test文件来管理不同环境的配置。（2）确保所有环境变量以VITE_开头，以便在客户端代码中访问。（3）不要在.env文件中存储敏感信息。（4）使用.gitignore文件排除.env文件，避免敏感信息泄露。
vue3vite打包后更改接口地址
weixin_63438333的博客
09-06 2229
v3的index.html虽然不在public下但是打包后会在public下生成一个index.html。项目上线后后续可能会有更改接口的需求不能再次打包死在打包文件内，1.首先把接口根路径写到一个不会打包的文件内，2.然后在接口封装处把接口地址动态传给axios。我们不想让文件被打包就不写type="module"，然后在引入配置文件时注意src="./webconfig.js"路径中不能有public。因为打包后webconfig.js和index.html平级都在打包文件内。在自己封装的接口文件中。
vue3+vite项目同时连接两个后台
wwngxu的博客
09-20 541
vue3+vite项目同时连接两个后台
vue3+vite+axios 配置连接后端调用接口
这个家伙很懒...
11-18 6654
总结记录
vite项目配置：后端希望能任意更改打包后的接口请求地址
个人博客
06-27 5421
通过window上挂载属性实现
vue+vite项目中跨域问题解决与跨域代理的两种方式原理详解
whs15193553607的博客
07-12 1728
（1） target参数：相当于是在代理地址（geoserver或者geoserverApi）前面拼接target代理后地址就是http://localhost:8080/geoserver或（2）changeOrigin参数：开启代理在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题；（3）rewrite参数：路径改写。
一篇搞懂基于Vite + Vue3项目前后端分别如何解决接口跨域问题
cuijiying的博客
01-20 2681
解决跨域问题的关键是在前端和后端之间通过配置代理或设置跨域允许的来源来实现。前端在开发环境下通过Vite配置代理，后端则通过中间件（Node.js使用cors，Java使用CORS配置类或注解）来允许特定来源的请求。前端：通过Vite配置开发环境代理，解决请求跨域。后端：使用中间件或配置类允许指定来源的请求。
基于VUE3+VITE+SpringBoot+Nginx部署项目之跨域配置等问题
群鸿
06-27 1134
无斜杠 (：保留匹配到的location中的路径部分，并将其附加在代理目标的URL后面。有斜杠 (：忽略匹配到的location中的路径部分，直接将请求路径附加在代理目标的URL后面。至此，结文。鸣谢：chatGPT 陪伴产品开发的每一天。
将后端API添加到您的Vite应用中。-JavaScript开发
05-26
在单个项目中编写前端和后端API可以加快开发（imo），此插件实质上将Next.js的API路由引入了Vite应用。 :yellow_heart:通过在GitHub上赞助他，可以帮助他成为一名全职开源维护者。 vite-plugin-mix动机在单个项目中编写前端和后端API可以加快开发（imo），此插件实质上将Next.js的API路由引入了Vite应用程序。 安装npm i vite-plugin-mix -D用法vite.config.ts：从'vite'导入{defineConfig}从'vite-plugin-mix'导入mix导出默认defineConfig（{插件：[mix（{handler：。 /手
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在开发Vue3项目时，我们通常会遇到一个问题：在本地开发环境中，项目能够顺利地请求到后台接口，但在打包部署到服务器后，却无法获取到数据。这种情况通常是由于请求的远程地址发生了变化，导致接口调用失败。本文将...
vite proxy同时配置多个代理
weixin_50741972的博客
08-18 1026
前端开发时会碰到有些后端接口未开发完成，需要进行本地mock，这个时候就需要配置多个代理，开发完成的接口连接本地或者测试环境后端，未开发完成的接口连接本地mock。
vite vue3进行多环境打包配置
qq_35181466的博客
07-19 6851
对此创建的vu3项目进行构建，项目分为四个环境：本地、测试、预发、生产。
vite中配置了proxy代理，如何查看代理之后的真实接口地址？
wytccc的博客
04-17 3141
【代码】vite中配置了proxy代理，如何查看代理之后的真实接口地址？
vite+vue3构建前端和多个后端服务器联调
weixin_43134304的博客
06-15 2130
vue3 构建前端与多个后端及测试服务器联调
vue3+vite通过命令动态切换后端接口地址
Zhanggebgchen的博客
07-21 706
就不一一文件展示了。
关于vite/cli构建项目的区别&环境变量配置&关于接口地址
hlonelier的博客
09-26 252
在 Vite 项目中，可以直接在根目录下创建以 `.env` 为前缀的文件来定义环境变量，例如 `.env.development` 和 `.env.production`。在 Vite 项目中，直接在根目录下创建以 `.env` 为前缀的文件来定义环境变量，例如 `.env.development` 和 `.env.production`。- **环境配置：** Vite 通过环境变量文件 `.env` 进行配置，而 Vue CLI 使用 `vue.config.js` 进行配置。
vite中使用proxy代理解决跨域
04-29
在 Vite 中，可以使用 `proxy` 选项来代理请求，解决跨域问题。 例如，我们可以在 `vite.config.js` 中配置一个代理，将所有 `/api` 开头的请求转发到 `http://localhost:3000`: ```js export default { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true } } } ``` 这样，当我们在应用中发起一个请求 `/api/users` 时，Vite 会将其转发到 `http://localhost:3000/api/users`，并将响应返回给应用。 其中，`changeOrigin` 选项用于修改请求头中的 `Host` 字段，使其与目标域名一致，以避免一些安全限制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值