一个项目里通过vite多页面方式来管理
AI 概述
实现步骤结果对比总结
很多后台管理系统都是差不多的，我能不能在一个项目里 通过 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 文件夹里面。不过这个需求好像没啥必要。
以上关于一个项目里通过vite多页面方式来管理的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 一个项目里通过vite多页面方式来管理
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 一个项目里通过vite多页面方式来管理
