Microapp 接入vite子应用

一、子应用

官网教程：https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/framework/vite

1，步骤一：修改vue.config.js/vue.config.ts

❗注意：

（1）根据官方教程，basename需要更换的！

（2）plugin:[] 里面保留vue(),再加上自定义插件的内容！

（3）记得配置跨域！

import { join } from 'path' 
import { writeFileSync } from 'fs'
// vite.config.js
export default defineConfig({
  base: `${process.env.NODE_ENV === 'production' ? 'http://my-site.com' : ''}/child-vite/`,
  plugins: [
    vue(), //这个不要删掉，亲测踩坑过，不要删
    // 自定义插件
    (function () {
      let basePath = ''
      return {
        name: "vite:micro-app",
        apply: 'build',
        configResolved(config) {
          basePath = `${config.base}${config.build.assetsDir}/`
        },
        writeBundle (options, bundle) {
          for (const chunkName in bundle) {
            if (Object.prototype.hasOwnProperty.call(bundle, chunkName)) {
              const chunk = bundle[chunkName]
              if (chunk.fileName && chunk.fileName.endsWith('.js')) {
                chunk.code = chunk.code.replace(/(from|import\()(\s*['"])(\.\.?\/)/g, (all, $1, $2, $3) => {
                  return all.replace($3, new URL($3, basePath))
                })
                const fullPath = join(options.dir, chunk.fileName)
                writeFileSync(fullPath, chunk.code)
              }
            }
          }
        },
      }
    })(),
  ],
})

    server: {
        port: 8081,//这个端口就是主应用挂载的url端口
        headers: {
          'Access-Control-Allow-Origin': '*' //记得配置跨域
        }
      }

2，步骤二：修改index.html的id名字

3，步骤三：同步修改main.js/main.ts挂载的容器

4，检查路由是否是history模式

到这里，可以去检验一下改好的子应用有没有问题，能不能正常跑，有问题及时调试，如果按照上面修改的话，最后跑起来的地址在应该是：

http://localhost:8081/child-vite/#/home；

❗注意：

（1）child-vite 就是你修改的 basename ！

（2）home就是你路由redirect的那个路径，你也可以自己修改的，懂的哈！

二、主应用

接入vite子应用和接入其他的子应用大部分步骤一样，可以参考我前面的文章（若依vue3 前端微应用改造），不一样的部分就是main.js里面的microApp.start()方法需要修改；我们按顺序来吧。

1，步骤一：下载microapp依赖

npm i @micro-zoe/micro-app --save 或 yarn add micro-zoe/micro-app --save

2，步骤二：main.js/main.ts引入microapp并且改写

// 放在顶部
import microApp from'@micro-zoe/micro-app'
microApp.start({
    plugins: {
        modules: {
          // appName即应用的name值
          'micro-app': [{
            loader(code) {
              if (process.env.NODE_ENV === 'development') {
                // 这里 basename 需要和子应用vite.config.js中base的配置保持一致
                code = code.replace(/(from|import)(\s*['"])(\/child-vite\/)/g, all => {
                  return all.replace('/child-vite/', 'http://localhost:8081/child-vite/')
                })
              }
              return code
            }
          }]
        }
      }
})

3，步骤三：router/index.js留一个给子应用挂载页面的路由

  {
    path: '',
    component: Layout,
    redirect: '/index',
    children: [
      {
        path: '/index',
        component: () => import('@/views/micro/micro2/index'),//根据相应的路径创建文件
        name: 'Index',
        meta: { title: '首页', icon: 'dashboard', affix: true }
      }
    ]
  },

注意：我这上面是若依的index的路由，你可以根据自己的路由创建文件和路径；

4，步骤四：创建的页面里面挂载子应用端口

    <micro-app 
      :name="micro-app" 
      :url="http://localhost:8081/" //你在子应用vite.config.ts里面配的端口
      baseRoute="/micro-app" //这个官网说失效，我忘记删了，根据情况试试吧
      :data="dataForChid" 
      @datachange="handleDataChange"
      inline  //官网要加的属性
      disableSandbox //官网要加的属性，关闭沙箱
      keep-alive 
      style="height: 100%"
    ></micro-app>

好了，大功告成了，可以试试启动主应用，有没有报错，进行调试；

三、报错案例

（1）错1：

说明子应用的vue()没加上，或者不小心给删掉了，记得给加上

（2）错2：

这个说明主应用的microApp.start()里面的配置写错了，或者和子应用配置的basename不一致，再去检查一下；

以上都是亲自踩过的错，能够解决的，另外可以去看官方的demo案例，看不同版本的实际写法，能够帮助你调试出错的问题：https://github.com/micro-zoe/micro-app-demo；

四，公测版：

另外官网现在有了公测版，如果是公测beta版本接入vite不需要修改vite.config.js也不需要在基座设置插件处理；可以参考这个的链接方法：https://micro-zoe.com/docs/1.x/#/zh-cn/framework/vite；

1，步骤一：主应用下载依赖

npm i @micro-zoe/micro-app@beta --save
yarn add @micro-zoe/micro-app@beta --save

2，步骤二：切换iframe沙箱

3，步骤三：关闭虚拟路由

microApp.start({
  'disable-memory-router': true, // 关闭虚拟路由系统
  'disable-patch-request': true, // 关闭对子应用请求的拦截
})

亲测了，其他不是vite的子应用不受影响，至于会不会有后续的问题，可以关注官网的情况。希望对大家能够有所帮助，可以进官网的官方群里问问里面的大佬们，另外vite版本好像9月份会再更新，记得关注官网的消息哦，创作不易，多多点赞。