前言
某天下班路上，骑着电瓶车突然想到，很多后台管理系统都是差不多的，我能不能在一个项目里 通过vite 多页面方式来管理。不用每次复制公共代码，面临不同项目公共代码不一致问题。只要新开项目，我就在里面添加个入口，所有的公共函数都公用。
开干
理想结构：
- 每个项目使用自己独自的入口、路由,互不干涉
- 所有公共代码都维护在一个项目里面，不用发npm 包的其它操作，简单方便。
- 所有项目工程化也是做一次即可。
- 使用上不用动package.json 配置每个项目.
实现步骤
- index.html 如何动态引入 不同项目下 main.js
- 如何在不更改 package.json 下通过传参启动不同项目
- vite-plugin-html 可以使用“占位符” 来更改 index.html
- node.js process.argv 可以获取到 cmd 命令行传参
// index.html 使用占位符来动态决定用哪个项目的入口
<body>
<div id="app"></div>
<%- injectScript %>
<!-- <script type="module" src="/src/main.js"></script> -->
</body>
vite.config.js
// 使用process.argv 来拿到 命令行 pnpm run dev -- --index 这个index参数
import { createHtmlPlugin } from "vite-plugin-html";
let mainPath = "index";
if (process.argv && process.argv.length > 0) {
if (process.argv[process.argv.length - 1].includes("--")) {
mainPath = process.argv[process.argv.length - 1].replace("--", "");
}
}
export default {
plugins: [
vue(),
createHtmlPlugin({
inject: {
data: {
injectScript: `<script>window.PROJECTMAIN="${mainPath}"</script>
<script type="module" src="/src/ProjectMain/${mainPath}/main.js"></script>`,
},
},
}),
]
}
// 启动项目
pnpm run dev -- --index
pnpm run dev -- --test
// 打包项目
pnpm run build -- --index
pnpm run build -- --test
结果对比
因为只是用来验证我的思路， 所以把两个项目，只是通过增减路由来看看打包体积区别；
- test
2. index
总结
通过简单的验证，我们可以看到这个结果完全符合我们的预期，基本所有的东西不动，我们只需要使用自己独立的入口和路由即可。目前还剩下一个问题，目前打包都是一个一个打包。后期看看能否 直接输入 pnpm run build 把两个项目都独立打包在 dist 文件夹里面。不过这个需求好像没啥必要。
参考：
- ，可能官网使用场景和我不同
- 使用场景类似，使用方法稍有不同