Vue3+Vite配置代理隐藏真实请求地址，让你的前端开发更加安全高效！

程序员必备宝典https://tmxkj.top/#/需求说明：我想把我后端真实地址影藏，使用前端域名地址展示。

上截图：

 例如我的后端域名是：https://twswx.top

 我前端展示项目域名是：https://ruxsj.top

 当我请求原接口时地址：https://twswx.top/api-net/menu/query?id=1

 配置后请求接口地址变成：https://ruxsj.top/api-net/menu/query?id=1

1.话不多说！上链接，开始配置

ENV = 'development'
# 代理
VITE_BASE_URL='/api-net'

ENV = 'production'
# 代理
VITE_BASE_URL='/api-net'

2.package.json 配置

  "scripts": {
    "dev": "vite --mode development",
    "build": "vite build --mode production",
    "preview": "vite preview"
  },

 3.在请求接口前面拼接   代理地址+接口名 （不要后端接口域名）

let BASE_URL = import.meta.env.VITE_BASE_URL;

 4.vite.config.js 配置文件设置代理

  server: {
    open:true,
    host: true,
    port: 3001,
      proxy: {
          "/api-net": {
              target: `https://twswx.top/api-net`,
              changeOrigin: true,
              rewrite: (p) => p.replace(/^\/api/, ""),
          }
      },
  }