一个项目里通过vite多页面方式来管理
目录
很多后台管理系统都是差不多的，我能不能在一个项目里 通过 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
结果对比
因为只是用来验证我的思路， 所以把两个项目，只是通过增减路由来看看打包体积区别；
1. test
2. index
总结
通过简单的验证，我们可以看到这个结果完全符合我们的预期，基本所有的东西不动，我们只需要使用自己独立的入口和路由即可。目前还剩下一个问题，目前打包都是一个一个打包。后期看看能否 直接输入 pnpm run build 把两个项目都独立打包在 dist 文件夹里面。不过这个需求好像没啥必要。
微信
支付宝声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系maynote@foxmail.com处理
码云笔记 » 一个项目里通过vite多页面方式来管理
码云笔记 » 一个项目里通过vite多页面方式来管理
