主应用vue3 + vite

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

问题1: Cannot use import statement outside a module

解决方案：

1. 安装vite-plugin-qiankun

npm install vite-plugin-qiankun -D

2. vite配置文件vite.config.js新增plugins如下

import qiankun from 'vite-plugin-qiankun'

plugins: [
      qiankun('vue3-element-admin', {
        useDevMode: true
      }),
      //、、、
   ]

3. 入口文件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

问题产生原因

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

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

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

解决方案

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

接着再使用patch-package 打上补丁， patch-package 打补丁可参考juejin.cn/post/732709…

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

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

解决方案

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

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

解决方案

在axios请求拦截器中配置baseUrl

问题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’.

当请求的凭据模式为“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’.

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

server.cors：为开发服务器配置CORS。默认启用并允许任何源。

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

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

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

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

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

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