vue2乾坤框架搭建

准备阶段

!!! 因为node版本或者vue-cli版本不同可能造成

1) 主应用抓取不到子应用，报错 “xxx died xxx”

2)初始化项目 , 项目的结构不同导致文章阅读比较麻烦. !!!

1.例子中node版本是 v14.17.0 , node历史版本下载链接

1. powershlell 中输入 vue --version 查看vue-cli的版本 , 本文例子是3.11.0 , vue-cli的2, 3 和4 的项目构造和安装方法都是不同的

2. yarn 或者 npm均可

1、乾坤的适用场景：
1.1 不同框架的前端项目整合成一个项目

1.2 老项目迁移到某个项目中去

1.3 大型项目分为几个独立的项目，分别部署、开发，各自发版不受影响

2、创建乾坤主应用
2.1 vue create XXX 搭建一个前端项目，记得添加router

2.2 安装乾坤依赖

yarn add qiankun 或者 npm i qiankun
2.3 在入口文件main.js中注册子应用

import { registerMicroApps, start } from "qiankun";

// 在主应用中注册子应用
registerMicroApps([
{
name: "vueApp", //子应用名称
entry: "//localhost:8081", //子应用启动的地址
container: "#container", // 子应用在主应用的容器名称
activeRule: "/app-vue", // 路由地址
props: {
data: "child子应用",
}, //传参
},
{
name: "vueApp2", //子应用名称
entry: "//localhost:8082", //子应用启动的地址
container: "#container2", // 子应用在主应用的容器名称
activeRule: "/testapp", // 路由地址
props: {
data: "child子应用",
}, //传参
},
]);
// 启动
start();
2.4 主应用配置跨域，项目根目录下创建 vue.config.js

module.exports = {
transpileDependencies: true,
devServer: {
port: 8080, //主应用启动端口号，视情况而定
headers: {
"Access-Control-Allow-Origin": "*", // 允许跨域访问子应用页面
},
},
}
2.5 在主应用中注册一个路由，默认路径为 /

2.6 主应用的App.vue中，写入跳转信息

3.子应用创建
3.1 vue create XXX , 记得添加路由

3.2 在src文件夹下新建public-path.js，代码如下

if (window.POWERED_BY_QIANKUN) {
webpack_public_path = window.INJECTED_PUBLIC_PATH_BY_QIANKUN;
}

3.3 在入口文件main.js中添加代码

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import './public-path'

Vue.config.productionTip = false;

let instance = null;
function render(props = {}) {
const { container } = props;
instance = new Vue({
router,
render: (h) => h(App),
}).$mount(container ? container.querySelector("#app-vue") : "#app-vue");
}

// 独立运行时
if (!window.POWERED_BY_QIANKUN) {
render();
}

export async function bootstrap() {
console.log("bootstraped");
}
export async function mount(props) {
console.log("mount");
render(props);
}
export async function unmount() {
console.log("unmount")
instance.$destroy();
instance.$el.innerHTML = "";
instance = null;
}

new Vue({
router,
render: (h) => h(App),
}).$mount("#app-vue");

3.4 配置子应用跨域，项目根目录下新建vue.config.js

const { name } = require("./package");
module.exports = {
transpileDependencies: true,
devServer: {
port: 8081, //子应用启动端口号，不可随意修改，与上文中父应用注册的子应用端口号对应
headers: {
"Access-Control-Allow-Origin": "*", //循序跨域
},
},
configureWebpack: {
output: {
library: ${name}-[name],
libraryTarget: "umd", // 把微应用打包成 umd 库格式
// jsonpFunction: webpackJsonp_${name},
},
},
};
3.5 路由配置，在src/router/index.js 中，修改代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
]