vue-cli 代理配置遇到的问题

最新推荐文章于 2024-06-19 11:33:40 发布
最新推荐文章于 2024-06-19 11:33:40 发布
阅读量579 收藏
点赞数
分类专栏： elementui-admin-template note 文章标签： vue.js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WPR13005655989/article/details/113581778
版权

代理配置不难，就是有些，这里做下记录避免重复踩坑；

环境

项目使用element-ui的基础模板: vue-admin-template，项目在本地localhost:8080运行，服务器webapp在https://xxx.xxx.ciom/app下；

代理配置

  • 1. 找到项目根目录下的vue.config.js中如下代码

      

如上图，马赛克位置1 中把服务器webapp地址放进去即可完成该文件的配置（打开日志可看到完整过程logLevel: 'debug'）

  • 2. 找到开发环境的配置文件.env.development，把#base api下的VUE_APP_BASE_API配置为/app即可

这样配置好后，当前端发起请求/app/user/login 时，请求会走向本地代理服务器并请求/app/user/login，代理服务器收到请求后，直接转向到上述配置的地址https://xxx.xxx.ciom/app/user/login,完成代理。

.env.development的VUE_APP_BASE_API 会直接在代理中使用，在这个项目中，当你的请求了VUE_APP_BASE_API的接口数据时，系统就认为你需要他给你做代理去访问另外的服务器；

i听音乐的猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue config.js proxy 代理使用记录
for_story的博客
12-21 2290
vue config.js proxy 代理使用记录 访问开发环境： proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { target: `http://192.168.2.37:8084`, changeOrigin: true, logLevel:'deb
详解项目升级到vue-cli3的正确姿势
12-02
- 在开发环境中，可能需要使用 Vue CLI 的代理功能处理跨域问题。配置 `devServer.proxy` 以设置代理规则。如果遇到 WebSocket 连接问题，可以设置 `ws: false` 来禁用 WebSocket 代理。 9. **处理特定环境的配置*...
vue自定义Log级别，用于调试与生产使用
只因有你，在路上。。。
03-13 3196
通过封装自定义日志等级，在不同环境展示不同信息。 import { Toast } from 'mint-ui' import config from '@/config' /** * 1:ALL * 2:DEBUG * 3:INFO * 4:WARN * 5:ERROR 错误日志 * 6:DEAL 需要处理 * 7:FATAL 系统严重错误 * @param param...
Vue配置proxy代理后，如何查看是否走代理地址
最新发布
weixin_44375151的博客
06-19 842
使用Vue自带的proxy配置代理，解决跨域问题
Vue localhost 中查看 proxy 后的实际访问IP地址
轻风细雨_林木木
02-07 3673
在使用vue-cli脚手架时，我们为了做到本地跨域会设置proxy达到跨域调用的效果，但是不方便查看实际调用IP地址，这个时候就需要logLevel属性了。
proxy error: could not proxy request解决方案
热门推荐
红目香薰
11-24 3万+
找到vue.config.js文件，改地址就行： devServer: { proxy: { '/api': { target: "http://localhost:端口号自己的地址", //这个更换成本地的地址 changeOrigin: true, logLevel: "debug" } } } 注： vue.config.js是一个可选的配置文件，如果项目的 (和package.json同级的) 根目录中存在这个文件，那么它会...
logLevel查看是否成功转到代理的地址
weixin_44707050的博客
03-13 422
但是否跨域成功 ，可添加logLevel:'debug'来在控制台打印跨域的地址确认是否跨域成功。场景 ：vue项目跨域，需要在proxy.js / vue.config.js中配置跨域的代码。
详解vue-cli 接口代理配置
11-29
接口代理配置主要在 `vue-cli` 的配置文件 `config/index.js` 或者新建的 `proxyConfig.js` 中进行。以下是对配置过程的详细解释： 1. **创建配置文件**： 通常推荐在 `config` 文件夹下新建 `proxyConfig.js`，并...
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
08-27
总结，本文详细介绍了如何使用 Vue CLI 构建项目，包括如何配置 axios 来请求后台接口，以及如何集成 Sass 和 Swiper。这使得开发者能够更高效地开发 Vue 应用，并且提供了更好的用户体验。在实际开发中，这些技术的...
浅谈vue-cli加载不到dev-server.js的解决办法
11-28
然而，在更新到较新的VueWebpackTemplate时，可能会遇到“vue-cli加载不到dev-server.js”的问题。这是因为旧版本中，开发服务器的配置通常在dev-server.js文件中，但新版本已经移除了这个文件，转而使用webpack.dev...
vue cli3 配置proxy代理无效的解决
10-16
在Vue CLI 3中，开发过程中常常需要配置代理来解决跨域问题，使得前端应用能够与后端API接口进行通信。然而，有时按照常规方法配置`proxy`后，可能会遇到代理无效的情况。本文将详细解释如何正确配置Vue CLI 3的`...
vue.config.js的全部配置
大乌鸦
07-17 3489
【代码】vue.config.js的全部配置。
vue设置proxy代理，如何去查看代理地址
qq_37322135的博客
09-06 1万+
vue代理真实地址查看
vue-cli 开发vue项目， 代理的配置
laozhong110的专栏
02-23 1283
vue 代理配置
proxy error could not proxy request解决方案
m0_67402341的博客
03-08 2006
找到vue.config.js文件，改地址就行： devServer: { proxy: { '/api': { target: "http://localhost:端口号自己的地址", //这个更换成本地的地址 changeOrigin: true, logLevel: "debug" } } } 注： vue.config.js是一个可选的配置文件，如果项目的 (和package.json同级的) 根目录中存在这个文件，那么它会被@vue/
vue 线上环境不打印console和debugger
Hellen90912的博客
10-22 2125
vue 线上环境不打印console 在vue.config.js文件里 configureWebpack: config => { if (process.env.NODE_ENV === ‘production’) { // 为生产环境修改配置… const terserWebpackPlugin = config.optimization.minimizer[0]; const { t...
vue-cli中的 proxy 代理配置的方法
qq_40055200的博客
12-09 1354
需求是项目中一个2大类模块，一类模块请求A域名；另一类模块请求B域名 参考地址： 配置参考 | Vue CLI DevServer | webpack 中文文档 // 如果后台给的地址是一样的，都以Api开头，可以像下面这样写 proxy: { '/testApi': { target: 'https://baidu.cn', // 服务器地址 changeOrigin: true, // 是否改变源地址 ws: true, // 是.
vue cli3.0项目vue.config.js的配置（有注释）
大乌鸦
10-20 1644
const path = require('path') // 拼接路径 function resolve(dir) { return path.join(__dirname, dir) } const CompressionPlugin = require('compression-webpack-plugin') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.
Vue配置vue.config.js打包时删除console.log日志
咻咻ing的专栏
10-27 6652
在Vue项目开发过程中，我们通常需要通过console来输出日志信息，协助我们进行代码调试，但是对于线上发布时，不能输出日志。可以通过vue.config.js配置在打包时统一删除console日志。 方法1： 如果需要根据打包环境来判断是否需要删除： // vue.config.js module.exports = { ... configureWebpack: config => { if (process.env.NODE_ENV === 'production') { c
vue-cli跨域代理后404
09-08
在使用Vue-cli进行开发时，我们常常会遇到跨域的...总结：使用vue-cli进行跨域代理时，可以通过配置vue.config.js文件来解决跨域问题。如果出现404错误，需要检查配置是否正确，并确认目标服务器是否能正确处理请求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值