Vue 3 + TypeScript + Vite 多入口打包及部署

为了方便一个代码库管理多个项目，并实现单独部署，所以研究了一下多入口打包。

代码仓库 vue-vite-multi-entry

1.新建项目

执行命令选择 vue 和 typescript

npm init vite@latest

2.调整目录

|-- vue-vite-multi-entry
    |-- package.json
    |-- vite.config.ts
    |-- src
        |-- vite-env.d.ts
        |-- app1
        |   |-- App.vue
        |   |-- index.html
        |   |-- main.ts
        |   |-- public
        |-- app2
            |-- App.vue
            |-- index.html
            |-- main.ts
            |-- public

3.配置vite.config.ts

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';

/* 项目名称 */
let [_, appName] = JSON.parse(process.env.npm_config_argv).original;
appName = appName.slice(appName.indexOf(':') + 1); //app1、app2

export default defineConfig(_ => {
  return {
    root: `./src/${appName}/`,
    base: process.env.NODE_ENV === 'production' ? '/' : '',
    plugins: [vue()],
    resolve: {
      alias: {
        '@': resolve(__dirname, './src'),
        comps: resolve(__dirname, './src/components'),
        store: resolve(__dirname, './src/store'),
        '~': resolve(__dirname, './'),
      },
    },
    server: {
      host: '0.0.0.0',
      port: 8080,
      force: true,
    },
    build: {
      rollupOptions: {
        input: {
          [appName]: resolve(__dirname, `src/${appName}/index.html`),
        },
        output: {
          chunkFileNames: 'js/[name]-[hash].js',
          entryFileNames: 'js/[name]-[hash].js',
          assetFileNames: '[ext]/[name]-[hash].[ext]',
        },
      },
    },
  };
});

4.配置package.json

{
  "name": "vue-vite-multi-entry",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev:app1": "vite serve src/app1/ --config ./vite.config.ts",
    "dev:app2": "vite serve src/app2/ --config ./vite.config.ts",
    "build:app1": "vue-tsc && vite build",
    "build:app2": "vue-tsc && vite build"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@types/node": "^18.15.11",
    "@vitejs/plugin-vue": "^4.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.2.0",
    "vue-tsc": "^1.2.0"
  }
}

5.运行不同项目

npm run dev:app1

npm run dev:app2

6.部署不同项目

生成两个不同的dist文件分别部署

npm run build:app1

npm run build:app2

7.总结

多入口打包思想为了方便不同scripts命令生成不同的项目并需要单独部署的情况，实现一个代码库管理多个项目。