背景
公司TAP项目出售给不同厂家会用到不同的主题色和logo，如果是每次打包手动修改就太麻烦且容易出错，通过在发版时构建镜像打包时选择主题和logo可以极大的提升效率。
实现
1.修改jenkinsfile文件
添加THEME和LOGO的环境变量选项，logo分别添加了AIPAAS和MINERVA两个可选项，theme也同理
pipeline {
agent any
options {
skipStagesAfterUnstable()
buildDiscarder(logRotator(numToKeepStr: '2'))
disableConcurrentBuilds()
}
parameters {
choice(name: "DEPLOY_TO", choices: "Dev\nTest\nDemo\nProd", description: "Which environment to deploy")
choice(name: "THEME", choices: "sys_tianyi\ndefault\nsys_green\nsys_orange\nsys_pink", description: "Which environment to theme")
choice(name: "LOGO", choices: "AIPAAS\nMINERVA", description: "Which environment to logo")
}
environment {
MODULE NAME = "aiminerva-minerva-console"
SERVICE_NAME_TEST = "minerva-portal-test"
SERVICE_NAME_DEMO = "minerva-portal-demo"
SERVICE_NAME_PROD = "minerva-portal-prd"
MAIL_TO = "zhangbingbing@trendytech.com.cn"
HARBOR_PROJECT = "minervav2"
K8S_NAMESPACE = "ai-minerva"
KUBE_CONFIG = "config"
}
......
}
2.添加打包脚本build.js
主要添加打包命令参数，将theme和logo添加到vite打包的环境中
const execa = require('execa');
const env = process.env;
const THEME = env.THEME;
const LOGO = env.LOGO;
async function build(theme, Logo) {
try {
const { stdout } = await execa('node', [
' -- max_old_space_size=6144',
'./node_modules/vite/bin/vite.js',
'build',
'--',
`--theme=${theme}`,
`--logo=${Logo}`,
]);
await execa('node', ['scripts/modify-favicon.js']);
console.log('Build output:', stdout);
} catch (error) {
console.error('Build failed:', error);
}
}
build(THEME, LOGO);modify-favicon.js
修改网页favicon图标
const fs = require('fs');
const env = process.env.LOGO || 'MINERVA';
const updateLink = (path) => {
const html = fs.readFileSync(path, 'utf-8');
const newHtml = html.replace(
/<link rel="shortcut icon" href="[^"]*"/,
`<link rel="shortcut icon" href="/${env}.ico"`
);
fs.writeFileSync(path, newHtml);
};
updateLink('dist/pages/console/index.html');
updateLink('dist/pages/portal/index.html');3.修改package.json的打包命令
"build": "node scripts/build.js",4.修改vite配置
获取打包文件命令中的theme和logo参数在打包时添加到js的window对象上
import { defineConfig, loadEnv } from 'vite';
export default ({ mode, command }) => {
const theme =
process.argv.find((arg) => arg.startsWith('--theme='))?.split('=')[1] ||
'sys_tianyi';
const logo =
process.argv.find((arg) => arg.startsWith('--logo='))?.split('=')[1] ||
'AIPAAS';
const env = loadEnv(mode, process.cwd());
return defineConfig({
define: {
__THEME__: JSON.stringify(theme),
__LOGO__: JSON.stringify(logo),
},
});
};5.修改主题色配置文件setting.config.js
只需要将theme变量的参数改为__THEME__
const app = config.app;
export default {
app: {
// eslint-disable-next-line no-undef
theme: __THEME__,
colorScheme: 'light',
elementSize: 'default',
defaultLang: 'zh-cn',
enablePermission: true,
enableProgress: true,
enableDynamicTitle: false,
storagePrefix: `${app}_`,
enableWatermark: false,
enableErrorLog: true,
routeBaseOn: 'frontend',
},
};6.修改logo的引用
<script>
const logo = new URL(`../../../assets/images/${__LOGO__}_logo.png`, import.meta.url);
</script>
<template>
<router-link
:to="to"
class="title"
:class="{ 'is-link': settingsStore.dashboard.enable }"
:title="title"
>
<img v-if="showLogo" :src="logo" class="logo" />
</router-link>
</template>
