背景
当前存在以vue2.6 开发的单例应用, 我们希望使用qiankun ，将该应用转微应用结构。
在保证原功能可用的情况下，使用vue3.0重构部分功能。
这里记录使用vue做微应用开发时，各个应用数据请求代理的配置方式.
目录
- root
- app-base // vue 2.6.12
- app-1 // vue 3.0.2
问题
我们知道一般，独立使用vue开发单例应用，可以通过配置 vue.config.js 的{ devServer: proxy } 实现接口请求代理.
而在微应用开发中，情况稍有不同。 具体的可以分为以下几种情况:
- 基座独立开发代理
- 子应用独立开发代理
- 子应用嵌套基座内的代理
现在的问题是，当基座和子应用各自独立配置代理服务时，各自独立开发请求数据是正常的。
而子应用加载到基座后，子应用的数据请求将为404 。
基座代理
基座版本vue2.6.12,
// vue.config.js
{
devServer:{
port: 9000,
publicPath: "/"
proxy: { // 代理配置
'/proxyApi': {
target: 'https://api-service.com',
ws: true,
changeOrigin: true,
pathRewrite: {
"^/proxyApi": ''
}
}
}
}
}
子应用代理
// vue.config.js
{
devServer: {
disableHostCheck: true,
port: 9030,
hot: true,
overlay: {
warnings: false,
errors: true,
},
headers: {
'Access-Control-Allow-Origin': '*',
},
proxy: { // 代理配置
'/proxyApi': {
target: 'https://api-service.com',
ws: true,
changeOrigin: true,
pathRewrite: {
"^/proxyApi": ''
}
}
}
},
publicPath: `http://localhost:${micro.port}/`,
}
分析
初看这里微应用中的代理配置和单例配置没有任何区别.其实代理的配置基础都是基于vue.config.js配置或者说是 webpack代理配置, 之所以 这里子应用无论独立开发或加载到基座联调，都能正常请求到数据，是因为基座和子应用都配置了相同的代理头 /proxyApi 并且请求的服务地址一致
这里回到问题， 如果基座和子应用独立配置, 例如:
子应用独立开发时的请求地址: /user
当子应用嵌套在基座内时，地址将变为: localhost: 9000/user
可以看到请求地址发生了变换，原/user 地址在独立开发时是能通过webpack server 做正常代理的.
而在微服务中， /user 地址转向了基座的本地开发服务 localhost:9000/user 而开发服务是无法识别这个请求地址的，自然返回404
所以我们将子应用的代理头与基座同步, 这样子应用的请求将通过基座的开发服务做代理转发, 之所以设置相同的代理头而不是在基座再配置一遍子应该代理，也是为了方便设置，遵循约定大于配置 原则。
其他方法
固定baseurl
之前的方法请求的baseurl 都为先对请求地址, 其实我们也可以直接设置完整的请求地址。
例如：axios.create({ baseURL: 'https://www.api-service.com'})
这样子应用的请求地址将不会被改写, 也就不会出现404 的情况。
