├── app-vue-hash ├── .browserslistrc ├── babel.config.js ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── logo.png │ ├── views │ │ ├── About.vue │ │ └── Home.vue │ ├── public-path.js │ ├── store │ │ └── index.js │ ├── router │ │ └── index.js │ ├── main.js │ ├── App.vue │ └── components │ │ └── HelloWorld.vue ├── README.md ├── .gitignore ├── package.json └── vue.config.js ├── app-vue-history ├── .browserslistrc ├── babel.config.js ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── logo.png │ ├── public-path.js │ ├── store │ │ └── index.js │ ├── views │ │ ├── About.vue │ │ └── Home.vue │ ├── router │ │ └── index.js │ ├── App.vue │ ├── main.js │ └── components │ │ └── HelloWorld.vue ├── README.md ├── .gitignore ├── package.json └── vue.config.js ├── main ├── .browserslistrc ├── public │ ├── favicon.ico │ └── index.html ├── babel.config.js ├── src │ ├── assets │ │ └── logo.png │ ├── views │ │ └── About.vue │ ├── store │ │ └── index.js │ ├── router │ │ └── index.js │ ├── App.vue │ ├── main.js │ └── components │ │ └── HelloWorld.vue ├── vue.config.js ├── README.md ├── .gitignore └── package.json ├── .gitignore ├── README.md └── package.json /app-vue-hash/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /app-vue-history/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /main/.browserslistrc: -------------------------------------------------------------------------------- 1 | defaults 2 | last 10 versions 3 | not ie <= 10 -------------------------------------------------------------------------------- /main/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gongshun/qiankun-vue-demo/HEAD/main/public/favicon.ico -------------------------------------------------------------------------------- /main/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /main/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gongshun/qiankun-vue-demo/HEAD/main/src/assets/logo.png -------------------------------------------------------------------------------- /app-vue-hash/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /app-vue-hash/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gongshun/qiankun-vue-demo/HEAD/app-vue-hash/public/favicon.ico -------------------------------------------------------------------------------- /app-vue-hash/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gongshun/qiankun-vue-demo/HEAD/app-vue-hash/src/assets/logo.png -------------------------------------------------------------------------------- /app-vue-history/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /app-vue-history/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gongshun/qiankun-vue-demo/HEAD/app-vue-history/public/favicon.ico -------------------------------------------------------------------------------- /app-vue-history/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gongshun/qiankun-vue-demo/HEAD/app-vue-history/src/assets/logo.png -------------------------------------------------------------------------------- /app-vue-hash/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /main/vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | transpileDependencies: ['single-spa','qiankun','import-html-entry'], 5 | }; 6 | 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | app-vue-hash/node_modules/ 2 | app-vue-hash/dist/ 3 | app-vue-history/node_modules/ 4 | app-vue-history/dist/ 5 | main/node_modules/ 6 | main/dist/ 7 | /node_modules 8 | package-lock.json -------------------------------------------------------------------------------- /app-vue-hash/src/public-path.js: -------------------------------------------------------------------------------- 1 | if (window.__POWERED_BY_QIANKUN__) { 2 | // eslint-disable-next-line no-undef 3 | __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; 4 | } 5 | -------------------------------------------------------------------------------- /app-vue-history/src/public-path.js: -------------------------------------------------------------------------------- 1 | if (window.__POWERED_BY_QIANKUN__) { 2 | // eslint-disable-next-line no-undef 3 | __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; 4 | } 5 | -------------------------------------------------------------------------------- /main/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /app-vue-hash/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | }, 9 | mutations: { 10 | }, 11 | actions: { 12 | }, 13 | modules: { 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /app-vue-history/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | }, 9 | mutations: { 10 | }, 11 | actions: { 12 | }, 13 | modules: { 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /main/README.md: -------------------------------------------------------------------------------- 1 | # 主项目 2 | 3 | 这是主项目，包括菜单和子项目和容器 4 | 5 | 6 | ## Project setup 7 | ``` 8 | npm install 9 | ``` 10 | 11 | ### Compiles and hot-reloads for development 12 | ``` 13 | npm run serve 14 | ``` 15 | 16 | ### Compiles and minifies for production 17 | ``` 18 | npm run build 19 | ``` -------------------------------------------------------------------------------- /app-vue-hash/README.md: -------------------------------------------------------------------------------- 1 | # app-vue-hash 2 | 3 | hash模式路由的子项目 4 | 5 | ## Project setup 6 | ``` 7 | npm install 8 | ``` 9 | 10 | ### Compiles and hot-reloads for development 11 | ``` 12 | npm run serve 13 | ``` 14 | 15 | ### Compiles and minifies for production 16 | ``` 17 | npm run build 18 | ``` 19 | -------------------------------------------------------------------------------- /app-vue-history/README.md: -------------------------------------------------------------------------------- 1 | # app-vue-history 2 | 3 | history模式路由的子项目 4 | 5 | ## Project setup 6 | ``` 7 | npm install 8 | ``` 9 | 10 | ### Compiles and hot-reloads for development 11 | ``` 12 | npm run serve 13 | ``` 14 | 15 | ### Compiles and minifies for production 16 | ``` 17 | npm run build 18 | ``` 19 | -------------------------------------------------------------------------------- /main/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /app-vue-hash/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /app-vue-history/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /app-vue-history/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | 14 | -------------------------------------------------------------------------------- /main/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | commonData: { 9 | // parent: 1 10 | }, 11 | }, 12 | mutations: { 13 | setCommonData(state, val){ 14 | state.commonData = val; 15 | } 16 | }, 17 | actions: { 18 | }, 19 | modules: { 20 | } 21 | }) 22 | -------------------------------------------------------------------------------- /main/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | Vue.use(VueRouter) 5 | 6 | const routes = [ 7 | { 8 | path: '/about', 9 | name: 'About', 10 | component: () => import('../views/About.vue') 11 | } 12 | ] 13 | 14 | const router = new VueRouter({ 15 | mode: 'history', 16 | base: process.env.BASE_URL, 17 | routes 18 | }) 19 | 20 | export default router 21 | -------------------------------------------------------------------------------- /app-vue-history/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /app-vue-hash/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app-vue-hash", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.5", 11 | "vue": "^2.6.12", 12 | "vue-router": "^3.4.3", 13 | "vuex": "^3.5.1" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "~4.2.0", 17 | "@vue/cli-plugin-router": "~4.2.0", 18 | "@vue/cli-plugin-vuex": "~4.2.0", 19 | "@vue/cli-service": "~4.2.0", 20 | "vue-template-compiler": "^2.6.12" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /app-vue-history/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app-vue-history", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.4", 11 | "vue": "^2.6.11", 12 | "vue-router": "^3.1.5", 13 | "vuex": "^3.1.2" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "~4.2.0", 17 | "@vue/cli-plugin-router": "~4.2.0", 18 | "@vue/cli-plugin-vuex": "~4.2.0", 19 | "@vue/cli-service": "~4.2.0", 20 | "vue-template-compiler": "^2.6.11" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /app-vue-hash/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import Home from '../views/Home.vue' 4 | 5 | Vue.use(VueRouter) 6 | 7 | const routes = [ 8 | { 9 | path: '/', 10 | name: 'Home', 11 | component: Home 12 | }, 13 | { 14 | path: '/about', 15 | name: 'About', 16 | // route level code-splitting 17 | // this generates a separate chunk (about.[hash].js) for this route 18 | // which is lazy-loaded when the route is visited. 19 | component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') 20 | } 21 | ] 22 | 23 | export default routes 24 | -------------------------------------------------------------------------------- /app-vue-history/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import Home from '../views/Home.vue' 4 | 5 | Vue.use(VueRouter) 6 | 7 | const routes = [ 8 | { 9 | path: '/', 10 | name: 'Home', 11 | component: Home 12 | }, 13 | { 14 | path: '/about', 15 | name: 'About', 16 | // route level code-splitting 17 | // this generates a separate chunk (about.[hash].js) for this route 18 | // which is lazy-loaded when the route is visited. 19 | component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') 20 | } 21 | ] 22 | 23 | export default routes 24 | -------------------------------------------------------------------------------- /app-vue-history/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 33 | -------------------------------------------------------------------------------- /main/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /app-vue-hash/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /app-vue-history/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /app-vue-hash/vue.config.js: -------------------------------------------------------------------------------- 1 | 2 | const { name } = require('./package'); 3 | module.exports = { 4 | devServer: { 5 | port: 1111, 6 | headers: { 7 | 'Access-Control-Allow-Origin': '*', 8 | }, 9 | }, 10 | chainWebpack: (config) => { 11 | config.module 12 | .rule('fonts') 13 | .test(/.(ttf|otf|eot|woff|woff2)$/) 14 | .use('url-loader') 15 | .loader('url-loader') 16 | .tap(options => ({ name: '/fonts/[name].[hash:8].[ext]' })) 17 | .end() 18 | }, 19 | // 自定义webpack配置 20 | configureWebpack: { 21 | output: { 22 | library: `${name}`, 23 | libraryTarget: 'umd',// 把子应用打包成 umd 库格式 24 | jsonpFunction: `webpackJsonp_${name}`, 25 | }, 26 | }, 27 | }; -------------------------------------------------------------------------------- /app-vue-history/vue.config.js: -------------------------------------------------------------------------------- 1 | const { name } = require('./package'); 2 | module.exports = { 3 | devServer: { 4 | port: 2222, 5 | headers: { 6 | 'Access-Control-Allow-Origin': '*', 7 | }, 8 | }, 9 | chainWebpack: (config) => { 10 | config.module 11 | .rule('fonts') 12 | .test(/.(ttf|otf|eot|woff|woff2)$/) 13 | .use('url-loader') 14 | .loader('url-loader') 15 | .tap(options => ({ name: '/fonts/[name].[hash:8].[ext]' })) 16 | .end() 17 | }, 18 | // 自定义webpack配置 19 | configureWebpack: { 20 | output: { 21 | library: `${name}-[name]`, 22 | libraryTarget: 'umd',// 把子应用打包成 umd 库格式 23 | jsonpFunction: `webpackJsonp_${name}`, 24 | }, 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /main/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "main", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve --open", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.4", 11 | "custom-event-polyfill": "^1.0.7", 12 | "fetch-polyfill": "^0.8.2", 13 | "qiankun": "^2.3.2", 14 | "vue": "^2.6.12", 15 | "vue-router": "^3.1.5", 16 | "vuex": "^3.1.2", 17 | "whatwg-fetch": "^3.2.0" 18 | }, 19 | "devDependencies": { 20 | "@vue/cli-plugin-babel": "~4.2.0", 21 | "@vue/cli-plugin-router": "~4.2.0", 22 | "@vue/cli-plugin-vuex": "~4.2.0", 23 | "@vue/cli-service": "~4.2.0", 24 | "vue-template-compiler": "^2.6.12" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /main/src/App.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 28 | 29 | 43 | -------------------------------------------------------------------------------- /main/src/main.js: -------------------------------------------------------------------------------- 1 | import 'whatwg-fetch'; 2 | import 'custom-event-polyfill'; 3 | import 'core-js/stable/promise'; 4 | import 'core-js/stable/symbol'; 5 | import 'core-js/stable/string/starts-with'; 6 | import 'core-js/web/url'; 7 | import Vue from 'vue' 8 | import App from './App.vue' 9 | import router from './router' 10 | import store from './store' 11 | import { registerMicroApps, start } from 'qiankun'; 12 | 13 | Vue.config.productionTip = false 14 | 15 | new Vue({ 16 | router, 17 | store, 18 | render: h => h(App) 19 | }).$mount("#app"); 20 | 21 | registerMicroApps([ 22 | { 23 | name: 'app-vue-hash', 24 | entry: 'http://localhost:1111', 25 | container: '#appContainer', 26 | activeRule: '/app-vue-hash', 27 | props: { data : { store, router } } 28 | }, 29 | { 30 | name: 'app-vue-history', 31 | entry: 'http://localhost:2222', 32 | container: '#appContainer', 33 | activeRule: '/app-vue-history', 34 | props: { data : store } 35 | }, 36 | ]); 37 | 38 | start(); 39 | -------------------------------------------------------------------------------- /app-vue-hash/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 项目说明 qiankun-vue-demo 2 | 3 | 用`qiankun`来实现`vue`技术栈的前端微服务 4 | 5 | `main`是主项目，`app-vue-hash`是`hash`模式路由的子项目，`app-vue-history`是`history`模式路由的子项目 6 | 7 | `qiankun`的开发和打包和正常模式一模一样，它使用一个全局变量`__POWERED_BY_QIANKUN__`来区分微前端模式和正常模式，不需要额外的配置和代码。 8 | 9 | 具体的原理分析和介绍可以看：[qiankun 微前端方案实践及总结](https://juejin.im/post/6844904185910018062) 和 [qiankun 微前端实践总结（二）](https://juejin.im/post/6856569463950639117) 10 | 11 | ## 运行和打包 12 | 13 | 在根目录下： 14 | 15 | 先安装依赖： `npm install`，再执行`npm run install-all`为所有项目安装依赖，最后执行`npm run start-all`即可启动所有的项目。 16 | 17 | `npm run build-all`可以打包所有`vue`项目，`jQuery`项目不需要打包。 18 | 19 | 20 | ## 分支介绍 21 | 22 | - `master` 分支： `qiankun` 的常规基础用法 23 | - `feature/hash-router` 分支 ：主子项目都是 `hash` 模式 24 | - `feature/keep-alive` 分支 ：使用 `loadMicroApp` 来实现 `keep-alive` 的 `tab` 效果 25 | - `feature/share-component` 分支 ：项目间共享组件的例子 26 | - `feature/routing-page` 分支 ：在主项目的某个路由页面加载子应用 27 | - `feature/share-dependencies` 分支 ：子项目复用主项目的公共依赖（vue，vuex，vue-router），以及主子项目间 i18n 的处理 28 | - `feature/vite-child` 分支 ：子项目是 vite 构建的 vue3 项目 29 | - `feature/use-main-app-component` 分支 ：子项目复用主项目的依赖 30 | - `feature/abstract-route` 分支 ：主项目同时展示两个子应用的不同页面，子项目使用 abstract 路由 31 | - `develop` 分支 ：修改源码来实现 `keep-alive`，以及公共依赖的复用的例子 -------------------------------------------------------------------------------- /app-vue-hash/src/main.js: -------------------------------------------------------------------------------- 1 | import './public-path'; 2 | import Vue from 'vue'; 3 | import VueRouter from 'vue-router'; 4 | import App from './App.vue'; 5 | import routes from './router'; 6 | import store from './store'; 7 | 8 | Vue.config.productionTip = false; 9 | 10 | let router = null; 11 | let instance = null; 12 | 13 | function render({ data = {} , container } = {}) { 14 | router = new VueRouter({ 15 | routes, 16 | }); 17 | instance = new Vue({ 18 | router, 19 | store, 20 | data(){ 21 | return { 22 | parentRouter: data.router, 23 | parentVuex: data.store, 24 | } 25 | }, 26 | render: h => h(App), 27 | }).$mount(container ? container.querySelector('#appVueHash') : '#appVueHash'); 28 | } 29 | 30 | if (!window.__POWERED_BY_QIANKUN__) { 31 | render(); 32 | } 33 | //测试全局变量污染 34 | console.log('window.a',window.a) 35 | 36 | export async function bootstrap() { 37 | console.log('vue app bootstraped'); 38 | } 39 | 40 | export async function mount(props) { 41 | console.log('props from main framework', props.data); 42 | render(props); 43 | } 44 | 45 | export async function unmount() { 46 | instance.$destroy(); 47 | instance.$el.innerHTML = ""; 48 | instance = null; 49 | router = null; 50 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "qiankun-vue-demo", 3 | "version": "1.0.0", 4 | "description": "用`qiankun`来实现`vue`技术栈的前端微服务", 5 | "main": "index.js", 6 | "scripts": { 7 | "install:hash": "cd app-vue-hash && npm install", 8 | "install:history": "cd app-vue-history && npm install", 9 | "install:main": "cd main && npm install", 10 | "install-all": "npm-run-all install:*", 11 | "start:hash": "cd app-vue-hash && npm run serve ", 12 | "start:history": "cd app-vue-history && npm run serve", 13 | "start:main": "cd main && npm run serve", 14 | "start-all": "npm-run-all --parallel start:*", 15 | "serve-all": "npm-run-all --parallel start:*", 16 | "build:hash": "cd app-vue-hash && npm run build", 17 | "build:history": "cd app-vue-history && npm run build", 18 | "build:main": "cd main && npm run build", 19 | "build-all": "npm-run-all --parallel build:*" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "git+https://github.com/gongshun/qiankun-vue-demo.git" 24 | }, 25 | "author": "gongshun", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/gongshun/qiankun-vue-demo/issues" 29 | }, 30 | "homepage": "https://github.com/gongshun/qiankun-vue-demo#readme", 31 | "devDependencies": { 32 | "npm-run-all": "^4.1.5" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /app-vue-history/src/main.js: -------------------------------------------------------------------------------- 1 | 2 | import './public-path'; 3 | import Vue from 'vue'; 4 | import VueRouter from 'vue-router'; 5 | import App from './App.vue'; 6 | import routes from './router'; 7 | import store from './store'; 8 | 9 | Vue.config.productionTip = false; 10 | 11 | let router = null; 12 | let instance = null; 13 | 14 | function render({ container } = {}) { 15 | router = new VueRouter({ 16 | base: window.__POWERED_BY_QIANKUN__ ? '/app-vue-history' : '/', 17 | mode: 'history', 18 | routes, 19 | }); 20 | 21 | instance = new Vue({ 22 | router, 23 | store, 24 | render: h => h(App), 25 | }).$mount(container ? container.querySelector('#appVueHistory') : '#appVueHistory'); 26 | } 27 | 28 | if (!window.__POWERED_BY_QIANKUN__) { 29 | render(); 30 | } 31 | //测试全局变量污染 32 | window.a = 1; 33 | export async function bootstrap() { 34 | console.log('vue app bootstraped'); 35 | } 36 | 37 | export async function mount(props) { 38 | console.log('props from main framework', props); 39 | render(props); 40 | // 测试一下 body 的事件，不会被沙箱移除 41 | // document.body.addEventListener('click', e => console.log('document.body.addEventListener')) 42 | // document.body.onclick = e => console.log('document.body.addEventListener') 43 | } 44 | 45 | export async function unmount() { 46 | instance.$destroy(); 47 | instance.$el.innerHTML = ""; 48 | instance = null; 49 | router = null; 50 | } 51 | -------------------------------------------------------------------------------- /app-vue-hash/src/App.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 32 | 33 | 62 | -------------------------------------------------------------------------------- /main/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 42 | 43 | 44 | 60 | -------------------------------------------------------------------------------- /app-vue-hash/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 42 | 43 | 44 | 60 | -------------------------------------------------------------------------------- /app-vue-history/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 42 | 43 | 44 | 60 | --------------------------------------------------------------------------------