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

背景: 需要同时维护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.json和manifest.json文件都是不一样的，所以我们要为每个小程序都创建各自的pages.json和manifest.json。新建build文件夹，然后为每个小程序新建一个文件夹用来存放这两个json文件。

在vite打包的时候，我们可以把每个小程序的pages.json和manifest.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() 用于将多个路径片段连接起来形成一个规范化的路径。