前后端联调环境配置

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 请求中了。后端代理成功

相关推荐
wusp199417 分钟前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
森林的尽头是阳光1 小时前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
计算机毕业设计木哥1 小时前
计算机毕设选题推荐:基于Java+SpringBoot物品租赁管理系统【源码+文档+调试】
java·vue.js·spring boot·mysql·spark·毕业设计·课程设计
zero13_小葵司1 小时前
Vue 3 前端工程化规范
前端·javascript·vue.js
Yolanda_20221 小时前
vue-sync修饰符解析以及切换iframe页面进行保存提示功能的思路
前端·javascript·vue.js
知识分享小能手12 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
萌萌哒草头将军13 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy14 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端14 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿14 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js