vue项目代理配置大全

Posted 2023-04-07 晓同哇哇~

目录

目前正处于不断学习中，现在接触的只有这两个，日后遇到的vue项目代理会实时更新

1.vite  （vue3-admin-element-template-master）

2.vite + ts     （vue-pure-admin-main）

3.服务器代理：

---

目前正处于不断学习中，现在接触的只有这两个，日后遇到的vue项目代理会实时更新

1.vite  （vue3-admin-element-template-master）

  server: 
    host: '0.0.0.0', //服务器ip地址 
    port: 5566, //本地端口
    fs: 
      strict: false, //  支持引用除入口目录的文件
    ,
    open: true, // 是否自动在浏览器打开
    proxy: 
      '/pcapi': 
        target: 'https:....../pcapi/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\\/pcapi/, ''),
      ,
      '/role': 
        target: 'http://labour_admin.kuxia.top/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\\/role/, ''),
      ,
    ,
  ,

2.vite + ts     （vue-pure-admin-main）

server: 
      // 是否开启 https
      https: false,
      // 端口号
      port: VITE_PORT,
      host: "0.0.0.0",
      // 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
      proxy: 
        "^/pcapi/.*": 
          // 这里填写后端地址
          target: "https:....../pcapi/",
          changeOrigin: true,
          rewrite: path => path.replace(/^\\/pcapi/, "")
        
      
    ,

3.服务器代理：

vue 前端设置跨域多代理

参考技术A 在项目开发的时候经常会遇到后端提供的多个服务请求地址域名或端口号不一致的情况这时候就需要前端设置多个proxy跨域代理，本文以vue-element-admin为例展示步骤如下：
1: 配置环境变量 .env.development

2: 配置项目根目录下的vue.config.js 找到devServer

PS：注意VUE_APP_BASE_API 放在数组的最后一个，如果你VUE_APP_BASE_API跟我一样设置为'' 的话，这样才不会被代理的虚拟path覆盖！

3: 找到项目中管理请求地址的文件 src/api/proxy.js （proxy.js 是我随便起的名字😄）

打开proxy.js

proxy_api 就是你之前在步骤1：中定义的虚拟path
VUE_APP_BASE_API_PROXY = '/proxy-api'
const url = (path) => (proxy_api + path) 一个路径处理函数，参数是'/xx/xxx/fetch/list'，return (proxy_api + path)

需要额外注意的是我在配置环境变量 .env.development的时候基础api设置的是空：

所以不需要在src/utils/request.js 中对代理的请求进行拦截

如果你为VUE_APP_BASE_API设置了虚拟path路径，那么就需要在src/utils/request.js为这个虚拟路径配置拦截，比较麻烦比不建议这么做。

至此跨域多代理已经设置完了，本文中设置两个代理一个基础代理VUE_APP_BASE_API，一个额外代理VUE_APP_BASE_API_PROXY，默认情况下走基础代理，当请求匹配到匹'/proxy-api' 时走额外代理～