vue 代理设置 访问图片_说下vue工程中代理配置proxy

最新推荐文章于 2024-05-30 13:37:50 发布
最新推荐文章于 2024-05-30 13:37:50 发布
阅读量2.2k 收藏
点赞数
文章标签： vue 代理设置 访问图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39605894/article/details/111944191
版权
本文介绍了如何在Vue项目中通过vue.config.js配置代理，避免后端使用nginx代理。在devServer中设置proxy，将特定路径如'/sys'和'/v1'的请求映射到指定的API服务器地址，实现前后端分离。配置后，axios请求不再需要设置baseURL，直接使用相对路径即可，如登录请求示例。
摘要由CSDN通过智能技术生成

这个代理配置不需要后台进行ngnix代理跳转了，前端可以做。在vue.config.js文件中进行配置，如下：

module.exports = {

publicPath: process.env.VUE_APP_BASEURL || '/',

// 修改webpack的配置

configureWebpack: {

// 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并

externals: {

'T': 'T'

}

},

// devServer 选项单独配置

devServer: {

https: false,

proxy: {

'/sys': {

target: process.env.VUE_APP_API_URL,//这个是全局的环境配置变量，单独建立的文件，以VUE_APP_开头的变量，每个文件中都可以访问，假设这里是http://www.sweeeper.com

changeOrigin: true,

onProxyReq: function (proxyReq) {

proxyReq.removeHeader('origin')

}

},

'/v1': {

target: process.env.VUE_APP_API_URL,

changeOrigin: true,

onProxyReq: func

最低0.47元/天 解锁文章
weixin_39605894
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
代理模式浅谈和在vue中的使用
郊眠寺
02-01 382
在代理模式中本体和代理有着相同的访问接口或者执行后有同样的效果，那么，开发前无需刻意进行代理模式的预测，当需要的时候再去对本体进行代理功能的编写。根据功能的不同，代理模式又可分为，缓存代理、防火墙代理、保护代理和跨域代理等模式。整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
vue 代理设置 访问图片_设计模式之 代理模式
weixin_34434736的博客
01-09 1326
明星有经纪人作为代理，可以理解为代理模式。JS 也一样，用另外一个对象的方法协助当前对象处理一些事情，也是代理。代理模式的关键代理模式的关键在于，当客户不方便直接访问一个对象或者不满足需要的时候，提供另外一个对象来控制对这个对象的操作，客户实际上操作的是这个替身对象。替身对象对请求作出处理之后，将消息转给本体对象。图片预加载的代码图片预加载是这样的，如果直接给某个img标签设置src,当...
vue .env文件配置使用
不懂一休
05-28 2万+
文章目录1、文件格式2、文件内容：3、文件配置①、.env②、.env.developmen③、.env.production3、使用方法①、process②、process.env③、获取 VUE_APP_API_BASE_URL④、全局配置Ⅰ、config/index.jsⅡ、使用 1、文件格式 .env 全局默认配置文件，不论什么环境都会加载合并 .env.developmen 开发环境下的配置文件 npm run serve(或者npm run dev 主要看 package.json) 会合
[vue2]本地实现api和图片代理
最新发布
weixin_47454566的博客
05-30 148
[vue2]本地实现api和图片代理
vue 代理设置 访问图片_vue搭建项目之设置代理
weixin_36278287的博客
02-05 923
前面将项目页面、axios、组件等都准备好了，现在就差设置代理了：首先在config下新建两个文件，分别叫做dev.uri.js和prod.uri.js，代码为：module.exports = {BASE_URI: '/api'}然后将dev.env.js的代码改为：const merge = require('webpack-merge')const prodEnv = require('./...
vue.config.js 文件配置
lmyh1111的博客
07-17 1170
代码】webpack配置（vue.config.js）
vue cli3 配置proxy代理无效的解决
10-16
总的来说，当遇到Vue CLI 3的`proxy`代理无效时，首先要检查配置是否正确，然后排查端口、请求路径和跨域设置。如果仍然无法解决问题，可能需要查看浏览器的开发者工具网络面板，检查请求是否被正确发送以及返回的...
webpack+vue-cil 中proxyTable配置接口地址代理操作
10-15
主要介绍了webpack+vue-cil 中proxyTable配置接口地址代理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VueCli4项目配置反向代理proxy的方法步骤
10-15
Vue CLI 4 提供了一个便捷的解决方案，即通过配置反向代理（proxy）来解决这个问题。下面我们将详细探讨Vue CLI 4 配置反向代理proxy的步骤以及其工作原理。 首先，让我们理解什么是反向代理。反向代理是网络代理的...
Vue项目配置跨域访问和代理proxy设置方式
11-19
在vue单页应用项目开发时，避免不了要请求后端，这时通常就会出现跨域问题。有2种常用的解决方案
Vue中process.env关键字，process.env.VUE_APP_BASE_API
热门推荐
coinisi_li的博客
01-04 3万+
Vue Cli 有以下三种运行模式development 模式用于 vue-cli-service servetest 模式用于 vue-cli-service test:unitproduction 模式用于 vue-cli-service build 和 vue-cli-service test:e2e我们查看配置信息，运行Vue CLI命令：开发环境运行npm run dev，要部署服务器发布生产环境时运行npm run build，
vue项目跨域问题（图片跨域）devServer.proxy代理失效时，nginx反向代理解决跨域问题
qq_44760347的博客
03-09 3720
vue项目跨域问题（图片跨域）devServer.proxy代理失效时，nginx反向代理解决跨域问题
vue加载图片，地图，请求api跨域问题
qq_40407998的博客
09-06 2638
vue加载图片，地图，请求api跨域问题通过proxy配置代理解决 vue.config.js引入可配置变量
vue路径代理
qq_38966984的博客
07-31 1008
前后端分离，后端8080，前端8081，图片路径/img/xx.png,前端请求后端的图片默认是请求8081端口的，需要把图片的请求代理到8080端口。 devServer: { proxy: { '/img/*':{ target:'http://localhost:8080/img/', changeOrigin: true, pathRewrite:{
vue项目图片地址的
程序媛的博客
03-10 1320
vue项目，不同情况下，使用图片路径的方法。
vue3项目vue.config.js配置“代理”、“端口”、“打包名”、“图片压缩”
bestyinjun的专栏
07-21 4366
vue3项目vue.config.js配置“代理”、“端口”、“打包名”、“图片压缩”
vue项目nginx代理图片访问请求
平静的大海
05-30 4001
vue前台访问springboot项目图片，路径无法访问到图片文件，需要做下地址转换，推荐在springboot中配置虚拟路径，但是如果很多地方已经配置的磁盘路径，修改的地方比较多，可以使用nginx做代理，通过nginx拦截图片请求来处理，也是不错的。 这个配置可以参考。https://www.cnblogs.com/qingmuchuanqi48/p/11831389.html 个人收藏，仅用来收藏。 ...
vue代理proxy与开发环境、生产环境配置
weixin_61211370的博客
02-21 3496
vue代理proxy与开发环境、生产环境配置
vue3 proxy代理会过滤node_modules中的请求地址吗
05-29
Vue.js 本身并没有提供 Proxy 相关的功能，一般是通过 Webpack 或者 Nginx 等服务器软件来实现反向代理。如果你是通过 Webpack 进行开发的话，可以在 `webpack.config.js` 中配置 `devServer.proxy` 选项来实现代理。在这种情况下，你可以通过配置 `devServer.proxy` 来决定是否过滤 node_modules 中的请求地址。 默认情况下，`devServer.proxy` 不会对任何请求地址进行过滤，也就是说，如果你访问的请求地址是 node_modules 中的文件，也会被代理到目标服务器中。如果你希望过滤掉 node_modules 中的请求地址，可以通过配置 `context` 选项来实现。例如，以下配置会过滤掉所有以 `/node_modules` 开头的请求地址： ```js module.exports = { // ... devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' }, context: function (pathname, req) { return !pathname.startsWith('/node_modules') } } } } } ``` 上面的配置中，`context` 函数返回 `true` 表示该请求地址不会被过滤，返回 `false` 则表示该请求地址会被过滤。在这个例子中，我们判断请求地址是否以 `/node_modules` 开头，如果是则过滤该请求地址，否则不过滤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值