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