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

背景: 需要同时维护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() 用于将多个路径片段连接起来形成一个规范化的路径。

相关推荐
@Carey4 小时前
uniapp配置消息推送unipush 厂商推送设置配置 FCM 教程
uni-app
转角羊儿4 小时前
uni-app上拉加载更多⑩
uni-app
程序员入门进阶5 小时前
基于微信小程序的电子购物系统的设计与实现(lw+演示+源码+运行)
微信小程序·小程序
我很苦涩的10 小时前
微信小程序使用uni cli框架绘制echarts图表
微信小程序·小程序·echarts
慢慢雨夜12 小时前
uniapp发布到微信小程序,提示接口未配置在app.json文件中
微信小程序·小程序·uni-app
Amd79413 小时前
Nuxt.js 应用中的 vite:extendConfig 事件钩子详解
自定义·开发·vite·配置·nuxt·构建·钩子
杨天天.16 小时前
微信小程序原生 canvas画布截取视频帧保存为图片并进行裁剪
微信小程序·小程序·音视频
转角羊儿17 小时前
uni-app用户登录⑫
uni-app
转角羊儿17 小时前
uni-app文章列表制作⑨
uni-app
一介青烟小生17 小时前
微信小程序自定义tabbar;禁用某个tab;修改某个tab的样式
微信小程序·小程序·notepad++