一、项目技术
vue3 + qiankun + antdesign + lerna + less + pinia + yarn + ts
目前除了主应用是vite,其他子应用都是webpack
想要子应用用vite,得依赖vite-plugin-qiankunvite-plugin-qiankun
yarn add vite-plugin-qiankun
二、改造main和新建vite.config.ts
改造main.ts
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
function render(props: any = {}) {
//...等代码
}
renderWithQiankun({
mount(props) {
render(props);
// store.commit("updateUserInfo",props);
// 在vue全局注册主应用的状态监听和状态改变事件
instance.config.globalProperties.$onGlobalStateChange = props.onGlobalStateChange;
instance.config.globalProperties.$setGlobalState = props.setGlobalState;
props.onGlobalStateChange((state: Record<keyof GlobalState, any>) => {
const userStore = useUserStore();
userStore.$patch({ ...state });
}, true);
},
bootstrap() {
console.log('bootstrap');
},
unmount() {
console.log('unmount');
const store = useUserStore();
store.$reset();
instance.unmount();
instance._container.innerHTML = '';
instance = null;
router = null;
history.destroy();
},
update() {
console.log('jfm-vite-update');
}
});
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
render();
}
添加vite.config.ts
我这里大部分借鉴gitHub的Vben的配置,可以自己去看一下Vben
用vite的库模式把子应用打包成umd格式
import path from 'path';
import { defineConfig, loadEnv, ConfigEnv, UserConfig } from 'vite';
import { themeConfig, microAppConfig } from '@2shu/common';
import pkg from './package.json';
// const { loadEnv, getEnvConfig } = require('./build/env');
import { wrapperEnv } from './build/utils';
import { createVitePlugins } from './build/plugins';
const { jfm } = microAppConfig;
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
console.log(path.resolve(__dirname, './src/main.ts'));
const root = process.cwd();
const env = loadEnv(mode, root);
const viteEnv = wrapperEnv(env);
const { VITE_DROP_CONSOLE } = viteEnv;
const isProd: boolean = command === 'build';
return {
base: isProd ? '' : '/',
// root: resolve(__dirname, './public/'),
resolve: {
alias: [
{
find: '@',
replacement: path.resolve(__dirname, './src')
},
{
find: 'vue',
replacement: 'vue/dist/vue.esm-bundler.js' // compile template
}
],
extensions: ['.ts', '.js']
},
define: {
'process.env': {}
},
css: {
preprocessorOptions: {
less: {
modifyVars: {
...themeConfig
},
javascriptEnabled: true
}
}
},
build: {
target: 'es2015',
lib: {
name: 'umd',
entry: path.resolve(__dirname, './src/main.ts'),
formats: ['umd'],
fileName: pkg.name
},
minify: 'terser',
outDir: 'dist',
terserOptions: {
compress: {
keep_infinity: true,
// Used to delete console in production environment
drop_console: VITE_DROP_CONSOLE
}
},
rollupOptions: {
// input: {
// 1: path.resolve(__dirname, './public/index.html')
// },
output: {
}
},
chunkSizeWarningLimit: 2000
},
//@ts-ignore
plugins: [createVitePlugins(viteEnv, isProd, jfm.name)],
experimental: {
renderBuiltUrl: (filename: string) => {
return `${process.env.ORIGIN}${filename}`;
}
},
optimizeDeps: {
include: ['ant-design-vue/es/locale/zh_CN']
}
};
});
替换变量格式、
将子应用各个地方的类型或者变量,之前的VUE_APP_GLOB_API_URL这种格式换VITE_GLOB_API_URL
改造index.html、
改造index.html,之前index.html在public文件夹里面,将它移到根目录下,放在public里面也可以,但是vite.config.ts的input要指定他的路径即可。官方放在根目录下面,我们就老老实实的的放在根目录下。
index.html详细看这里
<title><%= title %></title>
<script><%- injectEnvConfig %></script>
</head>
<body>
<div id="app" style="height: 100%"></div>
<script type="module" src="/src/main.ts"></script>
<!-- built files will be auto injected -->
</body>
步骤三、
src目录下面新建vite-env.d.ts文件
/// <reference types="vite/client" />
declare module '*.vue' {
import type { DefineComponent } from 'vue';
const component: DefineComponent<{}, {}, any>;
export default component;
}
interface Window {
ENV_CONFIG: {
VITE_GLOB_API_URL: string;
VITE_GLOB_CLIENT_ID: string;
};
__POWERED_BY_QIANKUN__?: boolean;
__INJECTED_PUBLIC_PATH_BY_QIANKUN__?: string;
}
根目录下面新建components.d.ts文件
// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'
export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
}
总体大概是这些,最后打包出来的,上面是webpack打包出来的格式,下面是vite打包出来的umd格式
我所安装的依赖,记得package.json的这里也要改
有错误可以指点出来,有疑问也可以提出