乾坤qiankun框架，vue3微应用项目搭建配置流程详细注解。

罗根-前端

已于 2024-07-24 16:28:56 修改

阅读量3.1k

点赞数 5

分类专栏： qiankun 乾坤微前端文章标签： vue 前端框架阿里云

于 2022-06-09 15:38:42 首次发布

本文链接：https://blog.csdn.net/qq_58946831/article/details/125204470

版权

qiankun 同时被 3 个专栏收录

4 篇文章 2 订阅

订阅专栏

微前端

4 篇文章 1 订阅

订阅专栏

乾坤

2 篇文章 0 订阅

订阅专栏

微应用 vue3项目搭建

第一步、在主应用examples目录下创建一个vue3的项目，创建流程正常创建vue3项目无异，在这里不做过多描述；

不知道examples文件从哪来的可点击查看主应用搭建流程。

第二步、在新创建的vue项目的src文件中创建名为public-path.js 的js文件，如图所示：

在这里插入图片描述

public-path.js文件代码如下：

if (window.__POWERED_BY_QIANKUN__) {
 // eslint-disable-next-line  no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

第三步、入口文件 main.js 文件代码修改如下：

import './public-path';
import { createApp } from 'vue'
import App from './App.vue'
import routes from './router'
import { createRouter, createWebHistory } from 'vue-router';
import store from './store'

let router = null;
let instance = null;
let history = null;

function render(props = {}) {
    const { container } = props;
    let arr = routes.options.routes;
    console.log(arr)
    history = createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/app-vue3' : '/');
    router = createRouter({
        history,
        routes: routes.options.routes,
    });
    instance = createApp(App);
    instance.use(router);
    instance.use(store);
    instance.mount(container ? container.querySelector('#app') : '#app');
}

if (!window.__POWERED_BY_QIANKUN__) {
    render();
}

export async function bootstrap() {
    console.log('%c%s', 'color: green;', 'vue3.0 app bootstraped');
}

function storeTest(props) {
    props.onGlobalStateChange &&
    props.onGlobalStateChange(
        (value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev),
        true,
    );
    props.setGlobalState &&
    props.setGlobalState({
        ignore: props.name,
        user: {
            name: props.name,
        },
    });
}

export async function mount(props) {
    storeTest(props);
    render(props);
    instance.config.globalProperties.$onGlobalStateChange = props.onGlobalStateChange;
    instance.config.globalProperties.$setGlobalState = props.setGlobalState;
}

export async function unmount() {
    instance.unmount();
    instance._container.innerHTML = '';
    instance = null;
    router = null;
    history.destroy();
}

第四步、打包配置文件（vue.config.js）代码修改成：

const { name } = require('./package');
module.exports = {
  devServer: {
    port: 7001, // 启动项目时的端口号
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      chunkLoadingGlobal: `webpackJsonp_${name}`,
    },
  },
};