vite-plugin-legacy-qiankun

让 vite 丝滑兼容 qiankun，且生产环境保证沙箱环境。

example

• code
• 在线体验地址

安装

1npm i vite-plugin-legacy-qiankun @vitejs/plugin-legacy -D

版本需要

vite >= 3

特性

• 保留 native module
• 生产环境 js 沙箱
• 生产环境 css 沙箱
• 开发环境 css 沙箱
• 开发环境 js 沙箱（设置 devSandbox = true 使用，还在测试中）

使用

vue3 + vite

1// main.js
2import { createLifecyle, getMicroApp } from 'vite-plugin-legacy-qiankun'
3import { createRouter, createWebHistory } from 'vue-router'
4import pkg from '../package.json' // your micro app name (pkg.name)
5
6const microApp = getMicroApp(pkg.name)
7
8const router = createRouter({
9  history: createWebHistory(microApp.__POWERED_BY_QIANKUN__ ? pkg.name : '/'),
10  routes: [
11    {
12      path: '/',
13      name: 'home',
14      component: () => import('./home.vue')
15    },
16    {
17      path: '/about',
18      name: 'about',
19      component: () => import('./about.vue')
20    }
21  ]
22})
23
24const render = () => {
25  createApp(App)
26    .use(router)
27    .mount(`#app_p3`)
28}
29
30if (microApp.__POWERED_BY_QIANKUN__) {
31  createLifecyle(pkg.name, {
32    mount(props) {
33      console.log('mount', pkg.name);
34      render();
35    },
36    bootstrap() {
37      console.log('bootstrap', pkg.name);
38    },
39    unmount() {
40      console.log('unmount', pkg.name)
41    }
42  })
43} else {
44  render();
45}

vue2 + vite

1// main.js
2import { createLifecyle, getMicroApp } from 'vite-plugin-legacy-qiankun'
3import VueRouter from 'vue-router'
4import pkg from '../package.json' // your micro app name (pkg.name)
5
6const microApp = getMicroApp(pkg.name)
7
8const router = new VueRouter({
9  mode: 'history',
10  base: microApp.__POWERED_BY_QIANKUN__ ? pkg.name : '/',
11  routes: [
12    {
13      path: '/',
14      name: 'home',
15      component: () => import('./home.vue')
16    },
17    {
18      path: '/about',
19      name: 'about',
20      component: () => import('./about.vue')
21    }
22  ]
23})
24
25const render = () => {
26  new Vue({
27    router,
28    render: (h) => h(App)
29  }).$mount('#app_p3')
30}
31
32if (microApp.__POWERED_BY_QIANKUN__) {
33  createLifecyle(pkg.name, {
34    mount(props) {
35      console.log('mount', pkg.name);
36      render();
37    },
38    bootstrap() {
39      console.log('bootstrap', pkg.name);
40    },
41    unmount() {
42      console.log('unmount', pkg.name)
43    }
44  })
45} else {
46  render();
47}

react + vite

1// main.jsx
2import { createLifecyle, getMicroApp } from 'vite-plugin-legacy-qiankun'
3
4const render = () => {
5  ReactDOM.createRoot(document.getElementById('root')).render(
6    <React.StrictMode>
7      <App />
8    </React.StrictMode>
9  )
10}
11
12const microApp = getMicroApp(pkg.name)
13
14if (microApp.__POWERED_BY_QIANKUN__) {
15  createLifecyle(pkg.name, {
16    mount(props) {
17      console.log('mount', pkg.name);
18      render();
19    },
20    bootstrap() {
21      console.log('bootstrap', pkg.name);
22    },
23    unmount() {
24      console.log('unmount', pkg.name)
25    }
26  })
27} else {
28  render();
29}

vite.config

react

1import { defineConfig } from 'vite'
2import react from '@vitejs/plugin-react'
3import legacy from '@vitejs/plugin-legacy' // need this
4import { legacyQiankun } from 'vite-plugin-legacy-qiankun'
5
6export default defineConfig({
7  server: {
8    origin: 'http://127.0.0.1:xxx', // 解决资源访问
9  },
10  plugins: [
11    react({ fastRefresh: false }),
12    legacy(),
13    legacyQiankun({
14      name: 'your micro app name',
15      devSandbox: true  
16    })
17  ]
18})

vue2

1import { defineConfig } from 'vite'
2import { createVuePlugin } from 'vite-plugin-vue2'
3import legacy from '@vitejs/plugin-legacy' // need this
4import { legacyQiankun } from 'vite-plugin-legacy-qiankun'
5
6export default defineConfig({
7  server: {
8    origin: 'http://127.0.0.1:xxx', // 解决资源访问
9  },
10  plugins: [
11    createVuePlugin(),
12    legacy(),
13    legacyQiankun({
14      name: 'your micro app name',
15      devSandbox: true  
16    })
17  ]
18})

vue3

1import { defineConfig } from 'vite'
2import vue from '@vitejs/plugin-vue'
3import legacy from '@vitejs/plugin-legacy' // need this
4import { legacyQiankun } from 'vite-plugin-legacy-qiankun'
5
6export default defineConfig({
7  server: {
8    origin: 'http://127.0.0.1:xxx', // 解决资源访问
9  },
10  plugins: [
11    vue(),
12    legacy(),
13    legacyQiankun({
14      name: 'your micro app name',
15      devSandbox: true  
16    })
17  ]
18})