Vue2和Vue3本地跨域代理

最新推荐文章于 2024-08-09 14:30:21 发布

梦是浮云

最新推荐文章于 2024-08-09 14:30:21 发布

阅读量222

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Z52863339/article/details/137545528

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue2项目中使用VueCLI配置跨域代理，以及Vue3中通过Vite的vite.config.js实现动态代理。重点比较了两者在开发服务器和配置文件上的不同点。

摘要由CSDN通过智能技术生成

Vue2

使用 Vue CLI 来创建和管理你的 Vue 项目，那么你可以在 vue.config.js 文件中配置代理来解决跨域.

VUE_APP_BASE_API = '/dev-api'

// 普通版
module.exports = {  
  devServer: {  
    proxy: {  
      '/api': {  
        target: '目标地址域名', // 目标地址  
        changeOrigin: true, // 开启代理，在本地创建一个虚拟服务器，然后发送请求的数据，会同时会收到请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题  
        pathRewrite: {  
          '^/api': '' // 路径重写，移除路径中的/api  
        }  
      }  
    }  
  }  
}

//  动态版
module.exports = {  
  devServer: {  
    proxy: {  
      [process.env.VUE_APP_BASE_API]: {
        target: '目标地址域名', // 目标地址  
        changeOrigin: true, // 开启代理，在本地创建一个虚拟服务器，然后发送请求的数据，会同时会收到请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题  
        pathRewrite: {  
          ['^'+process.env.VUE_APP_BASE_API]: "", // 路径重写，移除路径中的/api  
        }  
      }  
    }  
  }  
}

Vue3

使用 Vite 的本地跨域代理与 Vue CLI 的设置方式在某些方面是不同的。Vite 使用的是基于 Rollup 的开发服务器，而 Vue CLI 使用的是基于 webpack 的开发服务器。因此，在配置跨域代理时，它们可能有不同的设置方式和文件位置。

在 Vite 项目中，跨域代理的配置通常在 vite.config.js 文件中

VITE_BASE_API= '/dev-api'

// 普通版
// vite.config.js  
import { defineConfig } from 'vite'  
import { resolve } from 'path'  
  
export default defineConfig({  
  server: {  
    proxy: {  
      // 选项写法  
      '/api': {  
        target: '目标地址域名', // 目标地址  
        changeOrigin: true, // 开启代理，在本地创建一个虚拟服务器  
        rewrite: (path) => path.replace(/^\/api/, '') // 路径重写，移除路径中的/api  
      }  
    }  
  }  
  // 其他 Vite 配置...  
})

// 动态版

import { fileURLToPath, URL } from 'node:url'

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default( {mode}:{mode:any}) =>{
  const env = loadEnv(mode,process.cwd());
  return defineConfig({
    base: env.VITE_BASE_URL,
    plugins: [
      vue(),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    server:{
      open:false,
      host:'0.0.0.0', // 监听所有可用的网络接口  
      proxy:{
        [env.VITE_BASE_API]:{
          target:'目标地址域名', // 目标地址
          changeOrigin: true, // 开启代理，在本地创建一个虚拟服务器
          rewrite:(path) => path.replace(new RegExp(`^${env.VITE_BASE_API}`),''), // 路径重写，移除路径中的【env.VITE_BASE_API】
        }
      }
    }
  })
}