前后端联调环境配置

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

相关推荐
苹果酱056729 分钟前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.31 分钟前
react和vue的区别之一
javascript·vue.js·react.js
zqlcoding38 分钟前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
爱吃的强哥1 小时前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信1 小时前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
拖孩1 小时前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
凉豆菌2 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
广西千灵通网络科技有限公司2 小时前
基于 springboot+vue+elementui 的办公自动化系统设计(
vue.js·spring boot·elementui
YuShiYue5 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
一个专注写代码的程序媛5 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js