前端代理部署问题
作为前端最常出现的两个场景。
一,打包再本地部署
二,打包给服务器部署
不管哪种都属要配置代理才能解决跨域问题
VUE
主要是两个文件。
1.根目录下的vue.config.js中的 devServer 属性下进行配置.代理后访问 localhost:8088/ = http://xxx.xxx.xxx.xx/api
devServer: { port: 8088,//代理端口 proxy: { '/api': { // 以 “/api” 开头的 代理到下边的target属性的值中 target: 'http://xxx.xxx.xxx.xx',// 环境网址 changeOrigin: true,// 是否跨域 pathRewrite: { '^/api': ''// 路径重写 } }, }, }, publicPath: "/",// 部署应用包时的基本 URL /* 如果修改为publicPath:"/app",则项目首页路径: 从http://localhost:8088/#/index变为http://localhost:8088/app/#/index */
注:只需要更改接口地址就可以切换不同环境。记得改完配置文件,要重启项目,才生效
2.configs文件下index.ts网络请求接口配置。访问到环境后有各种类型的接口有不同的前缀,根据需要进行配置
const ip = '/api'; // 后台数据路径 export const serverIp = `${ip}/data`; // 图片数据路径 export const prefixIp = `${ip}/img`;
React
1.只需在根目录下package.json文件里添加属性
"proxy": "http://xxx.xxx.xxx.xxx"
2.config里的配置同上
// 后台数据路径 export const serverIp = `/data`; // 图片数据路径 export const prefixIp = `/img`;