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

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

相关推荐
xiejunna3 小时前
uniapp内把视频mp4的base64保持到手机文件系统
uni-app·视频base64保存手机
qq229511650217 小时前
微信小程序uniapp+vue飞机订票航空售票系统
vue.js·微信小程序·uni-app
Java Fans18 小时前
微信小程序——用户隐私保护指引填写(详细版)
微信小程序·小程序·notepad++
qq229511650218 小时前
微信小程序寓言童话创作APP设计与实现
微信小程序·uni-app
2401_8441379520 小时前
PHP露营地管理平台小程序系统源码
大数据·微信·微信小程序·小程序·微信公众平台·微信开放平台
咸虾米_20 小时前
vite跨越配置设置bypass函数,查看真实的接口地址,适用于uniapp
开发语言·javascript·uni-app·vue
anyup_前端梦工厂20 小时前
uni-app 图标库整合最佳实践:使用 iconfont 构建属于自己的图标库
前端·javascript·uni-app
friend_ship21 小时前
Vite与Vue Cli的区别与详解
vue.js·webpack·rollup·vite·vue脚手架·vue cli
zhangyao9403301 天前
uniapp uni-calendar日历实现考勤统计功能
开发语言·javascript·uni-app
qq22951165021 天前
微信小程序 高校教材征订系统
微信小程序·小程序