使用一套VITE配置, 在一个项目下开发并管理多个utools插件(VITE+VUE3+TS)

utools插件的设计很符合单页面应用, 因此使用单页面应用框架就非常适合以及上手, 加上vite的轻便, 不需要多大功夫就可以开发属于自己的插件了

但是如果要是开发多个插件, 那是不是需要每个插件就要拷贝一份vite配置

答案当然不需要, 我们可以使用vite配置多入口应用, 而且还能逐个打包管理, 只需要一套配置, 一个项目, 一个git仓库

仓库地址

https://gitee.com/hwy1045922393_qq_com/vitools-pc.git

基座`使用说明

1. step1 在src/microapps/下新建一个文件夹和一个html文件, 命名需要相同, 本教程用price作为例子

2. step2 src/microapps/price/下需要有plugin.json,preload.js,App.vue,main.ts,logo.png文件

• plugin.json: utools插件所需要的配置文件
• preload.js: utools插件预加载文件
• logo.png: utools插件的logo
• App.vue: Vue框架的入口vue文件
• main.ts: Vue框架的入口js文件

3. step3 src/microapps/price.html便是常见的Vue3的入口文件, script引入./price/main.ts

4. step4 src/microapps/price/plugin.json该文件是utools的配置文件,通过修改该文件development.main可支持热更替的调试插件, 其余配置见utools的开发文档. 使用vite打包后将完整的复制到build/price/plugin.json, 同理的还有preload.js文件和logo.png文件

5. step5 src/microapps/price/App.vue在该文件开发插件的功能

6. step6 vite.config.ts中配置pathRewritesConfig页面入口

7. step7 package.json在scripts加上打包脚本"build:price": "vite build --mode price"

8. step8 打包后将build/price/plugin.json导入到utools的开发工具中测试, 如果没有问题, 将build/price/所有文件按步骤发布即可

笔者还开发了个人的工具微信小程序, 感兴趣可以进去看看