前言
最近有个需求就是构建一个可复用公共组件、可分模块独立部署的前端项目。关于这个共享开发和分模块打包的操作，还记得是在上家公司的某个SpringBoot项目上见过。它的好处就是子模块各自独立开发与打包、可复用父模块的共享代码、降低耦合度等。前端这里还没试过这样的操作，于是面向谷歌/百度开发一下。嗯，原来有这种操作的，真是流批，在此记录一下这个解决方案。
一、准备环境
（1）开发环境
C:\Users\帅龍之龍>nvm -v
1.1.12
C:\Users\帅龍之龍>nvm ls
* 20.4.0 (Currently using 64-bit executable)
18.16.1
16.19.1
C:\Users\帅龍之龍>node -v
v20.4.0
C:\Users\帅龍之龍>npm -v
9.7.2
（2）nvm相关命令说明
nvm off # 禁用node.js版本管理(不卸载任何东西)
nvm on # 启用node.js版本管理
nvm install <version> # 安装node.js的命名 version是版本号 例如：nvm install 16
nvm uninstall <version> # 卸载node.js是的命令，卸载指定版本的nodejs，当安装失败时卸载使用
nvm ls # 显示所有安装的node.js版本
nvm list available # 显示可以安装的所有node.js的版本
nvm use <version> # 切换到使用指定的nodejs版本
nvm v # 显示nvm版本
nvm install stable # 安装最新稳定版
（3）settings.txt
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/
二、创建Vite项目
1.新建一个temp文件夹
（1）在桌面新建一个temp文件夹，然后在VS Code中打开此文件夹，打开一个终端；
2.创建一个Vite+Vue项目工程
（1）具体操作如下：
npm create vite@latest
(1) 输入项目名，如： vite-vue3-multi_modulets，然后回车
? Project name: » vite-vue3-multi_modulets
(2) 选择 Vue 框架，回车
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
> Vue
React
Preact
Lit
Svelte
Others
(3) 选择数据类型，回车
? Select a variant: » - Use arrow-keys. Return to submit.
> TypeScript
JavaScript
Customize with create-vue ↗
Nuxt ↗
(4) 创建完成，运行项目
Done. Now run:
cd vite-vue3-multi_modulets
npm install
npm run dev
PS C:\Users\帅龍之龍\Desktop\temp>
3.修改vite.config.ts文件
（1）修改前
import {
defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})
（2）修改后
import {
defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {
resolve } from 'path'
let config
const moduleName = process.env['npm_config_project'] // 使用`--project=[module_name]`获取模块名
if (!moduleName) {
// 构建父模块
config = {
plugins: [vue()],
}
} else {
// 构建子模块
config = {
plugins: [vue()],
root: `./src/apps/${
moduleName}`,
build: {
rollupOptions: {
input: resolve(__dirname, `src/apps/${
moduleName}/index.html`), // 指定子模块入口文件
output: {
dir: `dist/apps/${
moduleName}`
}
}
}
}
}
// https://vitejs.dev/config/
export default defineConfig(config)
三、以新建子目录的方式来创建应用或模块
（1）在项目的src目录中，新建apps文件夹
（2）在apps目录中，新建projectA和projectB文件夹
（3）在projectA和projectB文件夹，各新建一个App.vue、index.html、main.ts文件
/src/apps/projectA
-> App.vue
<template>
<div>项目A</div>
</template>
-> index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./assets/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>项目A</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./main.ts"></script>
</body>
</html>
-> main.ts
import {
createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
---- ---- ---- ---- ---- ---- ---- ----
/src/apps/projectB
-> App.vue
<template>
<div>项目B</div>
</template>
-> index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./assets/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>项目B</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./main.ts"></script>
</body>
</html>
-> main.ts
import {
createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
四、运行项目
npm run dev # 构建父模块
npm run dev --project=projectA # 构建projectA模块
npm run dev --project=projectB # 构建projectB模块
npm run build # 打包父模块
npm run build --project=projectA # 打包projectA模块
npm run build --project=projectB # 打包projectB模块
五、白嫖地址
vite-vue3-multi_modulets: 这是一个基于 Vite 构建的 Vue3 + TS 项目，支持组件共享、分模块编译和打包。
