背景

在开发钉钉应用时，遇到的问题，在一个项目中，涉及到多个小应用，这些应用除了公用的资源外，其余都应该有自己的业务逻辑，比如入口文件、路由配置等等，而且生产环境打包部署，可以实现分开打包，而不是为了改其中一个模块而整体打包替换，接下来就具体说一下我的实现方式。

第一步：创建项目

运行 npm create vite@latest 创建项目，此处不必过多描述，项目创建好后是这个结构：

运行 npm run dev

可以访问，第一步我们就成功了！

第二步：创建子应用

在src目录下创建pages文件夹，来存储我们的子应用目录，在pages中，创建两个文件夹 app1、app2 然后分别把App.vue、main.ts、index.html三个文件复制到两个文件夹下

注意：index.html中的script 要把src路径改一下

我们在app1的App.vue、app2的App.vue中填写点不同内容用来区分：

此时我们重新运行项目 npm run dev

访问地址：http://127.0.0.1:5176/

此时我们把地址栏后面添加/src/pages/app1/index.html

把地址栏后面添加/src/pages/app2/index.html

到现在为止，我们实现了多应用的访问！

第三步：增加vue-router

我们区分了子应用的入口，也应该把各自的路由配置完善，每个子应用的路由配置应该根据实际情况进行配置

首先安装vue-router, 控制台输入 npm install vue-router@latest --save

然后我们分别在app1、app2文件夹下创建router文件夹，router文件夹下创建index.ts，来作为路由文件，为了更好的测试，我们分别创建两个页面，一个是list,一个是info,结构如下：

我们让访问每一个子应用的根目录‘/’时就访问list页面，注意，我们应该把App.vue中的内容替换成，增加一个路由出口：

然后我们在mian.ts中把router引进来：

然后我们访问http://127.0.0.1:5176/

发现没有问题，我们继续，访问http://127.0.0.1:5176/src/pages/app1/index.html#/

我们成功的访问到了app1的list页面，然后我们在地址后面加上info：

如图，详情页面我们也访问到了，说明路由已经成功加到了router中，我们再把地址换成app2

到现在我们完成了每个子应用的路由配置。

第四步：build

上面我们的操作都是开发模式下的，多个子应用我们打包到生产环境该怎么办呢，我们先试一下，npm run build 会发生什么：

显而易见，npm run build 只是把根目录下的index.html作为入口，子应用根本没有打包，这时候我们应该看一下vite官网 cn.vitejs.dev/guide/build… ，看一下多应用该如何配置

好了，现在我们知道，vite底层是依赖于rollup进行打包，所以我们要进行rollup多应用配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  base:'./',
  plugins: [vue()],
  build:{
    rollupOptions:{
      input: {
        // main: resolve(__dirname, 'src/main/index.html'),
        app1: resolve(__dirname, 'src/pages/app1/index.html'),
        app2: resolve(__dirname, 'src/pages/app2/index.html')
      },
      output: {
        dir:'dist',
        compact: true,//该选项用于压缩 Rollup 产生的额外代码。请注意，这个选项不会影响用户的代码。这个选择在构建已经压缩好的代码时是很有用的。
        entryFileNames: "assets/js/[name]-[hash].js",
        chunkFileNames: "assets/js/[name]-[hash].js",
        assetFileNames: "assets/[ext]/[name].[ext]",
      }
    }
  }
})

然后我们运行 npm run build

发现子应用打包成功，但是有个问题，资源文件都被放在assets中，如果只按项目分别打包到app1、app2中，那样就更完美了，继续学习吧......

vite+vue3 多入口打包

背景

第一步：创建项目

第二步：创建子应用

第三步：增加vue-router

第四步：build