微前端qiankun踩坑

主应用vue3 + vite

子应用Vue3 + vite github.com/huzhushan/v…

问题1: Cannot use import statement outside a module

微前端qiankun踩坑

解决方案:

  1. 安装vite-plugin-qiankun
npm install vite-plugin-qiankun -D
  1. vite配置文件vite.config.js新增plugins如下
import qiankun from 'vite-plugin-qiankun'

plugins: [
      qiankun('vue3-element-admin', {
        useDevMode: true
      }),
      //、、、
   ]
  1. 入口文件main.js修改代码如下:
import { renderWithQiankun, qiankunWindow }  from 'vite-plugin-qiankun'

function appMount(props) {
  app
    .use(i18n)
    .use(ElementPlus)
    .use(pinia)
    .use(router)
    .mount(props.container ? props.container.querySelector('#app') : '#app')
}

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  appMount(null)
} else {
  renderWithQiankun({
    mount(props) {
      appMount(props)
    },
    bootstrap() {
      console.log('react app bootstraped');
    },
    unmount(props) {

    },
    update(props) {
      console.log('update props', props);
    }
  })
}

问题2: Failed to fetch dynamically imported module

微前端qiankun踩坑

问题产生原因

对比该js文件请求和其他js文件,发现响应头有差异,如下图所示:

微前端qiankun踩坑

微前端qiankun踩坑

插件vite-plugin-svg-icons的源码实现如下:

微前端qiankun踩坑

configureServer是Vite插件钩子, 这个钩子在生产环境不会被指向。官方介绍:cn.vitejs.dev/guide/api-p…

解决方案

我们在上面代码中增加一行,设置响应头Access-Control-Allow-Origin*

微前端qiankun踩坑
接着再使用patch-package 打上补丁, patch-package 打补丁可参考juejin.cn/post/732709…

问题3: 子应用路由跳转问题

主应用和子应用路由都是用的hash模式

解决方案

给子应用的路由前一个前缀,修改route相关代码如下:

微前端qiankun踩坑

问题4: 子应用请求接口的域名变成了主应用的域名

解决方案

在axios请求拦截器中配置baseUrl

微前端qiankun踩坑

问题5: 子应用请求接口跨域问题

子问题1: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’.

微前端qiankun踩坑
当请求的凭据模式为“include”时,响应中“access control Allow Origin”标头的值不得为通配符“*”。由XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制.

XMLHttpequest.withCredentials属性是一个布尔值,它指示了是否该使用类似cookie、Authorization标头或者TLS客户端证书等凭证进行跨站点访问控制(Access- Control)请求。设置withCredentials对同源请求是无效的。

子问题2: The value of the ‘Access-Control-Allow-Credentials’ header in the response is ” which must be ‘true’ when the request’s credentials mode is ‘include’.

微前端qiankun踩坑

上面的子问题1和子问题2的解决方案如下:
在vite的配置文件中新增如下配置:

微前端qiankun踩坑
server.cors:为开发服务器配置CORS。默认启用并允许任何源。

cors配置项的参考文档:github.com/expressjs/c…

子问题3: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

微前端qiankun踩坑

上述报错是指:响应头中没有Access-Control-Allow-Origin的配置。

我们这个接口用的是mock数据,mock插件vite-plugin-mock自定义了请求处理。

产生问题的原因和问题2类似, 我们修改下vite-plugin-mock的源码并打下补丁

微前端qiankun踩坑

原文链接:https://juejin.cn/post/7353447472557637695 作者:yanessa_yu

(0)
上一篇 2024年4月3日 下午4:00
下一篇 2024年4月3日 下午4:12

相关推荐

发表评论

登录后才能评论