qiankun vue3 vite 打包

对于使用 Qiankun、Vue 3 和 Vite 进行打包的场景，你可以按照以下步骤进行操作：

1. 首先，确保你已经完成了项目的开发，并且在本地可以正常运行。

2. 进入你的项目根目录，并执行以下命令安装 Qiankun 和 Vite 相关的依赖：

npm install qiankun @vue/cli-plugin-vue-next

或者

yarn add qiankun @vue/cli-plugin-vue-next

3. 在你的项目根目录下创建一个名为 `vite.config.js` 的文件，并添加以下内容：

import { defineConfig } from 'vite';

export default defineConfig({
  base: '/your-sub-app-base-path/',
});

将 `/your-sub-app-base-path/` 替换为你的子应用的基础路径，如果你的子应用是根路径，则直接使用 `/`。

4. 在 `src` 目录下创建一个名为 `main.js` 的文件，并添加以下内容：

import { createApp } from 'vue';
import App from './App.vue';

let app = null;

function render() {
  app = createApp(App);
  app.mount('#app');
}

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

export async function bootstrap() {
  console.log('子应用 vue3 vite 启动');
}

export async function mount(props) {
  render();
}

export async function unmount() {
  app.unmount();
  app = null;
}

5. 在 `package.json` 中添加以下内容：

{
  "name": "your-sub-app-name",
  "homepage": "/your-sub-app-base-path/",
  "scripts": {
    "build": "vue-cli-service build"
  }
}

将 `"your-sub-app-name"` 替换为你的子应用名称，`"/your-sub-app-base-path/"` 替换为你的子应用的基础路径。

6. 执行以下命令来进行打包：

npm run build

或者

yarn build

这将在你的项目根目录下生成一个 `dist` 目录，其中包含了打包后的静态文件。

7. 最后，将生成的 `dist` 目录中的文件部署到你的服务器或者 CDN 上，以供在 Qiankun 主应用中加载使用。

完成上述步骤后，你的子应用就可以通过 Qiankun 进行加载和使用了。希望对你有所帮助！