分享每一天-vue项目配置-proxy

vue项目配置-proxy

前端技术 1354 0 创建时间：2023-01-07 15:45:53

vue项目配置-proxy

## vue项目配置-proxy
本地开发项目经常遇到请求接口api跨越问题。为代理的问题，折腾了我很长时间，多总结多积累；

#### 1、vue2版本中的代理配置

```javascript
// vue.config.js

devServer:{
    port: 80, // 默认端口号
    https: false, // 是否为https 请求 https:{type:Boolean}
    compress: true,
    disableHostCheck: true, // 加上这段
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: process.env.VUE_APP_TARGET_API,
        changeOrigin: true,
        pathRewrite: {
          [`^${process.env.VUE_APP_BASE_API}`]: '',
        },
      },
    },
  }
```
#### 2、vue3版本中代理配置

```javascript
// vite.config.ts
server: {
      // https: true, // 是否为https 请求 https:{type:Boolean}
      host: true,
      port: 80, // 默认端口号
      proxy: {
        '/api': {
          target: env.VITE_APP_TARGET_API,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
          secure: false,
        },
      },
    }
```
vue2与vue3中配置代理的区别还是有一些，不同的，比如说vue2中用的pathRewrite， vue3中使用的是rewrite;

#### 3.配合elementUI 配置proxy
```javascript
//vue.config.js

const isProduction = process.env.NODE_ENV === 'development';

module.exports = {
  publicPath: isProduction ? './' : '/',//为项目中的所有资源(js、css、img)指定一个基础路径
  devServer: {
    proxy: {
      '/api': {//根据请求路径，匹配所有以/a开头的路径
        target: 'http://127.0.0.1:8004',//此处是thinkcmf API服务器
        secure: false,  // 如果是https开头，要设置为true
        changeOrigin: true,  //为true时，发送请求头中的host会设置成target。为false，则不变。默认为true
        pathRewrite: { '/api': '' },// 可选，本案例要注释掉。作用是发送请求时，请求路径重写：将 /a/xxx --> /xxx （去掉/a）
        cookiePathRewrite: {//重写cookie路径，可选
          '/fund': '/'
        },
      }
    },
    port: '8090'//npm run serve时的端口
  },
}

```

vue项目配置-proxy

商品推荐

广告推荐

推荐文章