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
效果界面:
- 初始化跟目录packge.json
pnpm init
- 创建pnpm-workspace.yaml文件,这个文件定义了工作空间的根目录
packages:
- 'packages/ **'
- 创建主项目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]'
}
}
}
})
- 子项目配置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)