前后端联调环境配置

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

相关推荐
用户516816614584117 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦17 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He17 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼2 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_2 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing2 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化