前后端联调环境配置

~ rainbow～2024-12-20 14:10

1、常规情况：登录页和后台管理系统是同一个IP地址

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
   proxy: {
     // 将本地的 /api 代理到后台服务器的 URL
     '/api': {
       target: 'http://backend-server.com', // 后台服务器地址
       changeOrigin: true, // 改变请求头中的 Origin 为 target
       rewrite: (path) => path.replace(/^\/api/, '') // 重写路径，去掉 /api 前缀
     }
   }
  }
});

2、特殊情况，登录页和后台管理系统不是一个IP地址时。

方法一、

// .env.development
VITE_API1_URL=http://login-server-ip
VITE_API2_URL=http://admin-server-ip

// vite.config.js
import { loadEnv } from 'vite';

const env = loadEnv(process.env.NODE_ENV, process.cwd());

export default defineConfig({
  server: {
    proxy: {
      '/api1': {
        target: env.VITE_API1_URL,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api1/, '')
      },
      '/api2': {
        target: env.VITE_API2_URL,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api2/, '')
      }
    }
  }
});

方法二：跳过登录页，直接访问后台管理系统，viteConfig 里面的配置只配后台管理系统的。

直接访问会存在一个问题，权限控制是通过cookie 来判断的。用户登录成功时，会把cookie信息存入http 中，本地调试时，没有登录操作，可以把测试环境的cookie信息导入到开发环境。具体操作步骤：

（1）安装cookie-Editor, 浏览器扩展工具

（2）登录测试环境，即需要导出Cookie的页面，打开cookie-editor,点击导出按钮

（3）回到自己的项目运行的标签，打开cookie-editor，点击导入按钮

刷新页面，打开浏览器控制台，可以看到，此时cookie 已经添加到http 请求中了。后端代理成功