Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lishaobos/vite-plugin-legacy-qiankun
让 vite 集成 qiankun，支持 js，css 沙箱
https://github.com/lishaobos/vite-plugin-legacy-qiankun
qiankun vite
Last synced: about 2 hours ago
JSON representation
让 vite 集成 qiankun，支持 js，css 沙箱
- Host: GitHub
- URL: https://github.com/lishaobos/vite-plugin-legacy-qiankun
- Owner: lishaobos
- Created: 2022-11-14T03:30:57.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-16T02:37:06.000Z (over 1 year ago)
- Last Synced: 2024-10-10T18:27:53.898Z (about 1 month ago)
- Topics: qiankun, vite
- Language: TypeScript
- Homepage:
- Size: 873 KB
- Stars: 104
- Watchers: 3
- Forks: 10
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vite-plugin-legacy-qiankun
让 vite 丝滑兼容 [qiankun](https://github.com/umijs/qiankun)，且生产环境保证沙箱环境。
## example
- [code](./example/README.md)
- [在线体验地址](http://120.46.195.54/)
## 安装
```js
npm i vite-plugin-legacy-qiankun @vitejs/plugin-legacy -D
```
## 版本需要
vite >= 3
## 特性
- 保留 native module
- 生产环境 js 沙箱
- 生产环境 css 沙箱
- 开发环境 css 沙箱
- 开发环境 js 沙箱（设置 devSandbox = true 使用，还在测试中）
## 使用
### vue3 + vite
```js
// main.js
import { createLifecyle, getMicroApp } from 'vite-plugin-legacy-qiankun'
import { createRouter, createWebHistory } from 'vue-router'
import pkg from '../package.json' // your micro app name (pkg.name)
const microApp = getMicroApp(pkg.name)
const router = createRouter({
history: createWebHistory(microApp.__POWERED_BY_QIANKUN__ ? pkg.name : '/'),
routes: [
{
path: '/',
name: 'home',
component: () => import('./home.vue')
},
{
path: '/about',
name: 'about',
component: () => import('./about.vue')
}
]
})
const render = () => {
createApp(App)
.use(router)
.mount(`#app_p3`)
}
if (microApp.__POWERED_BY_QIANKUN__) {
createLifecyle(pkg.name, {
mount(props) {
console.log('mount', pkg.name);
render();
},
bootstrap() {
console.log('bootstrap', pkg.name);
},
unmount() {
console.log('unmount', pkg.name)
}
})
} else {
render();
}
```
### vue2 + vite
```js
// main.js
import { createLifecyle, getMicroApp } from 'vite-plugin-legacy-qiankun'
import VueRouter from 'vue-router'
import pkg from '../package.json' // your micro app name (pkg.name)
const microApp = getMicroApp(pkg.name)
const router = new VueRouter({
mode: 'history',
base: microApp.__POWERED_BY_QIANKUN__ ? pkg.name : '/',
routes: [
{
path: '/',
name: 'home',
component: () => import('./home.vue')
},
{
path: '/about',
name: 'about',
component: () => import('./about.vue')
}
]
})
const render = () => {
new Vue({
router,
render: (h) => h(App)
}).$mount('#app_p3')
}
if (microApp.__POWERED_BY_QIANKUN__) {
createLifecyle(pkg.name, {
mount(props) {
console.log('mount', pkg.name);
render();
},
bootstrap() {
console.log('bootstrap', pkg.name);
},
unmount() {
console.log('unmount', pkg.name)
}
})
} else {
render();
}
```
### react + vite
```js
// main.jsx
import { createLifecyle, getMicroApp } from 'vite-plugin-legacy-qiankun'
const render = () => {
ReactDOM.createRoot(document.getElementById('root')).render(
)
}
const microApp = getMicroApp(pkg.name)
if (microApp.__POWERED_BY_QIANKUN__) {
createLifecyle(pkg.name, {
mount(props) {
console.log('mount', pkg.name);
render();
},
bootstrap() {
console.log('bootstrap', pkg.name);
},
unmount() {
console.log('unmount', pkg.name)
}
})
} else {
render();
}
```
## vite.config
### react
```js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import legacy from '@vitejs/plugin-legacy' // need this
import { legacyQiankun } from 'vite-plugin-legacy-qiankun'
export default defineConfig({
server: {
origin: 'http://127.0.0.1:xxx', // 解决资源访问
},
plugins: [
react({ fastRefresh: false }),
legacy(),
legacyQiankun({
name: 'your micro app name',
devSandbox: true
})
]
})
```
### vue2
```js
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import legacy from '@vitejs/plugin-legacy' // need this
import { legacyQiankun } from 'vite-plugin-legacy-qiankun'
export default defineConfig({
server: {
origin: 'http://127.0.0.1:xxx', // 解决资源访问
},
plugins: [
createVuePlugin(),
legacy(),
legacyQiankun({
name: 'your micro app name',
devSandbox: true
})
]
})
```
### vue3
```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy' // need this
import { legacyQiankun } from 'vite-plugin-legacy-qiankun'
export default defineConfig({
server: {
origin: 'http://127.0.0.1:xxx', // 解决资源访问
},
plugins: [
vue(),
legacy(),
legacyQiankun({
name: 'your micro app name',
devSandbox: true
})
]
})
```