作為前端最常出現(xiàn)的兩個場景志膀。
一，打包在本地部署
二鳖擒，打包給服務器部署
不管哪種都屬要配置代理才能解決跨域問題
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',// 環(huán)境網址
changeOrigin: true,// 是否跨域
pathRewrite: {
'^/api': ''// 路徑重寫
}
},
},
},
publicPath: "/",// 部署應用包時的基本 URL
/*
如果修改為publicPath:"/app",則項目首頁路徑:
從http://localhost:8088/#/index變?yōu)閔ttp://localhost:8088/app/#/index
*/
注：只需要更改接口地址就可以切換不同環(huán)境溉浙。記得改完配置文件，要重啟項目蒋荚，才生效
2.configs文件下index.ts網絡請求接口配置戳稽。訪問到環(huán)境后有各種類型的接口有不同的前綴，根據需要進行配置
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`;
