vue3+vite+monorepo+qiankun+pnpm框架

vue3+vite+monorepo+qiankun+pnpm框架

项目地址：https://download.csdn.net/download/qq_38862234/86293271
升级版：增加eslint+prettier代码保存自动格式化 https://download.csdn.net/download/qq_38862234/86298995
升级版+1：增加 vue-i18n、lodash、dayjs、windicss https://download.csdn.net/download/qq_38862234/86338361
升级版+2：增加组件库ui定制 、工具函数定制 https://download.csdn.net/download/qq_38862234/86338889
效果界面：

1. 初始化跟目录packge.json

pnpm init

2. 创建pnpm-workspace.yaml文件，这个文件定义了工作空间的根目录

packages:
  - 'packages/ **'

3. 创建主项目main和子项目child

pnpm create vite
pnpm install

项目结构：

项目公用依赖可以放在根目录下：
pnpm add -w xxxx
指定项目添加依赖：
pnpm --filter 项目名(package.json的name字段) add xxxx
主项目引用子项目：
pnpm --filter main add child@*
4. 主项目使用qiankun注册子项目

// main.ts
import { registerMicroApps, start } from 'qiankun'
import HelloWord from '../components/HelloWord.vue'
// 向子应用传值（方法，组件等，只要是对象，key 名无要求）
const props = {
  components: {
    HelloWord
  }
}
registerMicroApps([{
  name: 'child',
  entry: process.env.NODE_ENV === 'development' ? 'http://localhost:3002' : '/child/',
  container: '#container',
  activeRule: '/child',
  props
}])
start()
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3001,
  },
  build: {
    outDir: '../dist', // 打包地址
    rollupOptions: {
      output: {
        chunkFileNames: 'common/js/[name]-[hash].js',
        entryFileNames: 'common/js/[name]-[hash].js',
        assetFileNames: 'common/[ext]/[name]-[hash].[ext]'
      }
    }
  }
})

5. 子项目配置qiankun

// main.ts
// @ts-nocheck
import { App, createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/es/helper'
import app from './App.vue'

let root: App

// renders 生命周期函数
renderWithQiankun({
  mount(props: any) { render(props) },
  bootstrap(props: any) { },
  unmount() { root.unmount() },
  update() { }
})

// 独立运行时
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({})
}

// 渲染页面
function render(props: any) {
  const { container } = props
  const router = createRouter({
    history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/child' : '/'),
    routes: []
  })
  root = createApp(app)
  root.use(router)

  // 主应用全局组件
  props.components && Object.keys(props.components).map(key => {
    root.component(key, props.components[key])
    return false
  })

  const dom = container ? container.querySelector('#app') : document.getElementById('app')
  root.mount(dom)
}


// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'

const options = {
  server: {
    port: 3002,
    cors: true
  },
  plugins: [
    vue(),
    qiankun('child', {
      useDevMode: true
    })
  ],
  build: {
    target: 'es2015',
    outDir: '../../dist/child'
  }
}

// 打包 - 需要
if (process.env.NODE_ENV === 'production') {
  // @ts-expect-error
  options.base = '/child'
}

export default defineConfig(options)