简介
两个项目，UI界面以及框架是一致的，且有很多个公用的组件可以共同使用。所以想着在一个大的项目里实现两个小项目：projectA和projectB项目，公共部分提取出来。本方案中，vue项目由一个主程序和若干个子系统构成。主程序代码放置于外层，提供共享组件和功能；而子系统各自独立，仅包含私有代码。运行时，可整个项目集成运行，也可以单个子系统运行；打包类似，可整体打包，也可单个子系统独立打包。
虽然各个子系统各自独立，但必须风格统一，且为了效率和成本，总有一些资源可以复用，比如一些组件和公共路由。而实际部署时，既可以整体部署，也应该可以每个子系统独立部署，独立配置，以降低风险和耦合，提升性能和资源利用率，等等。
目录
总的来说，是公共部分放在外围，而各个子系统集中于一个子文件夹下。在结构上，每个子系统都几乎是一个完整的项目，特别是都提供入口（即main.js）。
├── package.json
├── vite.config.js
└── src
└── api // 公用的api
└── components // 公用组件
└── project
└── projectA
└── utils // 各自的具包
｜————api
｜————router
｜————views
｜————index.html
｜————main.ts
｜————App.vue
└── projectB
└── utils // 各自的具包
｜————api
｜————router
｜————views
｜————index.html
｜————main.ts
｜————App.vue
└── utils // 公用工具包
└── assets // 静态文件
└── store // 状态容器
└── types // type类型
配置文件
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
function resolve(dir) {
return path.resolve(__dirname, dir);
}
export default defineConfig(({ command, mode }) => {
let root = './src';
let outDir = 'dist';
if(mode == 'projectA'){
root = './src/project/projectA';
outDir = 'dist/projectA';
}else if(mode == 'projectB'){
root = './src/project/projectB';
outDir = 'dist/projectB';
}
return {
root:root,
base: '/',
plugins: [
vue(),
],
build: {
outDir: outDir,
},
resolve: {
extensions: ['.vue', '.js', '.json', '.mjs', '.ts'],
alias: {
"@": resolve("src"),
"@a": resolve("src/projects/projectA"),
"@b": resolve("src/projects/projectB")
},
},
server: {
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: 'https://www.aa.com/api/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
}
})
scripts
package.json, 运行、打包的脚本
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"dev:A": "vite --mode projectA",
"dev:B": "vite --mode projectB",
"build:A": "vite build --mode projectA",
"build:B": "vite build --mode projectB"
},
注意事项
这种开发模式，有一个很大的问题，就是工程里包含了所有模块的代码。如果整个项目非常复杂，代码量就很大，那开发的时候，IDE加载、查找、替换等就受到比较大的影响。 平时开发，先将其他开发小组的代码移到别的地方，轻装上阵。
// 移走批处理文件：clean.sh
mv -f ./src/project/projectA ../temp/src/project/projectA
mv -f ./src/project/projectB ../temp/src/project/projectB
// 挪回批处理文件：restore.sh
mv -f ../temp/src/project/projectA ./src/project/projectA
mv -f ../temp/src/project/projectB ./src/project/projectB
