前后端联调环境配置

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

相关推荐
花花鱼2 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
清风ai明月12 小时前
vue模板语法中使用冒号: 什么时候使用,什么时候不使用呢?
前端·javascript·vue.js
少卿12 小时前
uniapp run使用指南 - VSCode 开发 Uni-app 项目
前端·vue.js
剑亦未配妥12 小时前
Vue2函数式组件实战:手写可调用的动态组件,适用于toast轻提示、tip提示、dialog弹窗等
前端·vue.js·vue
zoahxmy092912 小时前
Vue3 视频播放与截图功能实现
javascript·vue.js
waylon1111312 小时前
【HOC】高阶组件在Vue老项目中的实战应用 - 模块任意排序
前端·vue.js·面试
DJA_CR12 小时前
解决在 TSX 中使用 `RouterView` + `KeepAlive` 不生效问题
前端·vue.js
小旋风0123412 小时前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
gongzemin13 小时前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
麦麦大数据14 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统