作为前端最常出现的两个场景。
一，打包在本地部署
二，打包给服务器部署
不管哪种都属要配置代理才能解决跨域问题
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`;
