基于qiankun搭建vue3 webpack ts微前端项目入门实践

TodayCoding

已于 2023-03-28 19:36:44 修改

阅读量353

点赞数 1

文章标签：前端 vue.js webpack typescript npm

于 2023-03-21 17:06:16 首次发布

本文链接：https://blog.csdn.net/mjnmjn000/article/details/129686445

版权

基础环境

实践日期：2023-03-21

Vue CLI: 5.0.8
Node: 18.15.0
Package Manager: npm 9.5.0
OS: Windows 10 x64

设置npm镜像源

npm config set registry https://registry.npmmirror.com/

主应用

创建项目，命名为main

vue create main

选项如下：

Vue CLI v5.0.8

? Please pick a preset: Manually select features

? Check the features needed for your project: TS, Router

以下均为默认选项

? Choose a version of Vue.js that you want to start the project with 3.x

? Use class-style component syntax? No

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

? Save this as a preset for future projects? No

安装qiankun，实践版本：qiankun@2.10.3

cd main
npm i qiankun -S

创建全局CLI配置：vue.config.js

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
    devServer: {
        proxy: {
            '/micro1/js': { target: 'http://127.0.0.1:8081' },
        },
    },
})

创建空视图组件：src/views/EmptyView.vue

<template></template>

设置路由：src/router/index.ts

import EmptyView from '../views/EmptyView.vue'

  {
    path: '/',
    name: 'home',
    component: HomeView
  }, // 以下是新增内容
  {
    path: '/micro1/:chapters*',
    name: 'micro1',
    component: EmptyView
  },

添加路由链接和微应用容器：src/App.vue

  <nav>
    <router-link to="/micro1">Micro1 Home</router-link> | <!-- 新增该行 -->
    <router-link to="/micro1/about">Micro1 About</router-link> | <!-- 新增该行 -->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <div id="container" style="height: 720px; border: solid;"></div> <!-- 新增该行 -->

注册微应用并启动：src/main.ts

import { registerMicroApps, start } from 'qiankun'

createApp(App).use(router).mount('#app') // 以下是新增内容

registerMicroApps([
    {
        name: 'micro1',
        entry: 'http://localhost:8081/micro1/',
        container: '#container',
        activeRule: '/micro1',
    },
]);

start();

启动应用

npm run serve

微应用

创建项目，命名为micro1

vue create micro1

选项如下：

Vue CLI v5.0.8

? Please pick a preset: Manually select features

? Check the features needed for your project: TS, Router

以下均为默认选项

? Choose a version of Vue.js that you want to start the project with 3.x

? Use class-style component syntax? No

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

? Save this as a preset for future projects? No

创建全局CLI配置：vue.config.js

const { defineConfig } = require('@vue/cli-service')
const { name } = require('./package');

module.exports = defineConfig({
    configureWebpack: {
        output: {
            chunkLoadingGlobal: `webpackChunk${name}`,
            library: `${name}-[name]`,
            libraryTarget: 'umd',
        },
    },
    devServer: {
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    },
    publicPath: '/micro1/',
})

设置端口：package.json

    "serve": "vue-cli-service serve --port 8081",

修改挂载容器标识：public/index.html

    <div id="app"></div> <!-- "app"改为"micro1-app" -->

修改挂载容器样式选择器：src/App.vue

<style>
#app { /* #app改为#micro1-app */

导出路由：src/router/index.ts

export default router // 以下是新增内容
export { routes }

导出相应的生命周期钩子：src/main.ts

import { App, createApp } from 'vue'
import { createRouter, createWebHistory, Router, RouterHistory } from 'vue-router'
import { routes } from './router'
import root from './App.vue'

let router: Router | null;
let instance: App<Element> | null;
let history: RouterHistory;

function render(props: { container: Element }) {
    history = createWebHistory('/micro1/');
    router = createRouter({ history, routes });
    instance = createApp(root).use(router);
    instance.mount(props.container.querySelector('#micro1-app')!);
}

export async function bootstrap() {
}

export async function mount(props: { container: Element }) {
    render(props);
}

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

启动应用