vue脚手架配置代理

分手后的思念是犯贱 2023-10-02 22:19 26阅读 0赞

方法一

在vue.config.js中添加如下配置

devServer: {
        proxy: "http://localhost:5000"
    }

说明

1.  优点：配置简单，请求资源时直接发给前端（8080）即可
2.  缺点：不能配置多个代理，不能灵活的控制请求是否走代理
3.  工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求就会转发给服务器（优先匹配前端资源）

方法二

编写vue.config.js具体代理规则：

const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
      transpileDependencies: true,
      //代理服务器（方式二）
      devServer: {
        proxy: {
          '/api1': {
            target: 'http://localhost:5000',
            pathRewrite: {
              '^/api1' : ''
            },
            ws: true, //用于支持websocket
            changeOrigin: true //用于控制请求头中的host值
          },
          '/api2': {
            target: 'http://localhost:5000',
            pathRewrite: {
              '^/api2' : ''
            },
            ws: true, //用于支持websocket
            changeOrigin: true //用于控制请求头中的host值
          },
          '/foo': {
            target: '<other_url>'
          }
        }
      }
    })

说明: 1.优点:可以配置多个代理，且可以灵活的控制请求是否走代理。

⒉.缺点:配置略微繁琐，请求资源时必须加前缀。

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue脚手架

1.npm install -g @vue/cli 下载vue 2.在vue文件夹(自己建立的学习vue的文件夹)下,打开cmd,输入 vue create hel

客官°小女子只卖身不卖艺/ 2024年04月06日 12:47/ 0 赞/ 223 阅读

相关 Vue脚手架配置代理、安装axios

目录准备阶段准备学生服务器准备汽车服务器编辑安装axios 一、Vue脚手架配置代理代理服务器 Vue脚手架配置代理（一次性可以配置多个） vue.

曾经终败给现在/ 2024年04月06日 09:18/ 0 赞/ 221 阅读

相关 vue脚手架配置代理

方法一在vue.config.js中添加如下配置 devServer: { proxy: "http://localhost:5000"

分手后的思念是犯贱/ 2023年10月02日 22:19/ 0 赞/ 27 阅读

相关使用Vue脚手架配置代理服务器的两种方式

1 前言本文主要介绍使用Vue脚手架配置代理服务器的两种方式注意：Vue脚手架给我们提供了两种配置代理服务器的方式，各有千秋，使用的时候只能二选一，不能同时使用

向右看齐/ 2023年09月23日 15:41/ 0 赞/ 103 阅读

相关 vue-cli4脚手架配置

在项目根目录创建vue.config.js文件 const path = require("path"); //引入path模块 function res

梦里梦外;/ 2022年12月27日 07:19/ 0 赞/ 264 阅读

相关 vue-cli 脚手架下载配置

vue-cli脚手架 4.4+ （新版本慎用） 2.9.6 （稳定版，目前多数公司依旧在用） 1.安装 (1)webpack npm i webpa

港控/mmm°/ 2022年11月29日 12:25/ 0 赞/ 248 阅读

相关 vue脚手架配置

2.X的脚手架，写的很详细 [vue-cli配置文件及其他文件说明][vue-cli] [vue-cli3.0配置详解][vue-cli3.0] [vue cli 3配

秒速五厘米/ 2022年04月13日 09:25/ 0 赞/ 387 阅读

相关 vue-cli3.0脚手架配置步骤

脚手架3.0配置步骤 1、在全局安装脚手架 cnpm i @vue/cli -g 2、如果没有yarn，建议安装yarn cnpm i yarn -g

布满荆棘的人生/ 2022年02月26日 12:46/ 0 赞/ 366 阅读

相关 Vue脚手架

Vue脚手架一、安装脚手架二、创建Vue项目 1.交互式命令行创建 1.创建项目 2.选择配置

旧城等待，/ 2021年09月07日 06:13/ 0 赞/ 648 阅读

相关 vue脚手架

1. vue-cli中使用路由 1. 把路由相关页面创建好 2. 到src->router->index.js文件下，来进行配置路由 2.1 先引用

妖狐艹你老母/ 2021年07月24日 18:04/ 0 赞/ 605 阅读