一、子应用

官网教程：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月份会再更新，记得关注官网的消息哦，创作不易，多多点赞。