同一套代码打包到不同小程序

背景: 需要同时维护3个小程序,小程序之间有很多相同的模块,一开始想要弄3个不同的代码分支来进行管理,但是后期维护太麻烦,因为相同的模块修改一处代码要同步到3个分支。最后决定用一套代码打包到不同平台,项目使用的技术栈是:vue3+ts+vite+uni-app。

根据不同小程序设置环境模式

新建env文件夹,文件夹为每个小程序都创建2个.env文件,用来保存开发环境以及生产环境的配置

每个文件增加对应的环境变量,用来 配置文件路径(用于第三步复制文件)

js 复制代码
VITE_APP_BUILD_CONFIG=build/manage
VITE_APP_BUILD_CONFIG=build/student
VITE_APP_BUILD_CONFIG=build/teacher

添加脚本命令

package.json文件中添加脚本命令

json 复制代码
"scripts": {
    "dev:mp-weixin:student": "uni -p mp-weixin  -m  studentDev",
    "dev:mp-weixin:teacher": "uni -p mp-weixin  -m  teacherDev",
    "dev:mp-weixin:manage": "uni -p mp-weixin  -m  manageDev",
    "build:mp-weixin:student": "uni build -p mp-weixin -m studentPro",
    "build:mp-weixin:teacher": "uni build -p mp-weixin -m teacherPro",
    "build:mp-weixin:manage": "uni build -p mp-weixin -m managePro",
  },

-m--mode的缩写,设置环境模式 参考:vite脚本命令

创建pages.json和manifest.json

manifest.json 文件是小程序的配置文件,用于指定应用的名称、图标、权限,appid等

pages.json 页面路由文件,用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

每个小程序的页面pages.jsonmanifest.json文件都是不一样的,所以我们要为每个小程序都创建各自的pages.jsonmanifest.json。新建build文件夹,然后为每个小程序新建一个文件夹用来存放这两个json文件。

在vite打包的时候,我们可以把每个小程序的pages.jsonmanifest.json文件复制到src目录。首先安装 fs-extra库,它可以对项目中的文件进行创建、删除、复制等操作

node 复制代码
pnpm install fs-extra 
pnpm install @types/fs-extra
ts 复制代码
// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import path from 'path'

export default defineConfig(async ({ mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量,而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, `${process.cwd()}/env`, '')
  //  把 env.VITE_APP_BUILD_CONFIG的文件复制到src目录
  await fs.copy(path.resolve(__dirname, env.VITE_APP_BUILD_CONFIG), path.join(__dirname, 'src'))
  return {
    envDir: path.resolve(__dirname, 'env'), // 读取配置文件的目录
  }
})

path 是Node.js内置的模块, path 模块来处理文件路径相关的操作。

__dirname 变量表示当前文件所在的目录路径 process.cwd()项目根目录(index.html 文件所在的位置)。可以是一个绝对路径,或者一个相对于该配置文件本身的相对路径。 path.resolve() 获取文件或目录的绝对路径 path.join() 用于将多个路径片段连接起来形成一个规范化的路径。

相关推荐
dccose1 小时前
vue3 uniapp 扫普通链接或二维码打开小程序并获取携带参数
小程序·uni-app
上优6 小时前
uniapp 选择 省市区 省市 以及 回显
大数据·elasticsearch·uni-app
尘浮生7 小时前
Java项目实战II基于微信小程序的校运会管理系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
尘浮生11 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen13 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
景天科技苑17 小时前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
耶啵奶膘17 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡20 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼1 天前
微信小程序-prettier 格式化
微信小程序·小程序