JeecgBoot+Vue2修改主题更换皮肤

前言

• 前端系统基于 vue2 + jeecgboot + ant-design 1.7.2 版本进行构建，需要在内网环境实现主题色切换功能，但实际操作过程中会遇到，如在离线环境中进行皮肤切换操作，会一直弹窗 “正在编译主题！”。同时遇到了登录页主题色未跟随切换、离线无法加载 less.js 文件等问题。

• 所涉及到的相关包版本，具体如下：

"vue-antd-jeecg":"3.4.3",
"vue": "^2.6.10",
"ant-design-vue": "^1.7.2",
"less": "^3.9.0",
"less-loader": "^4.1.0",

默认主题色配置

项目启动会加载默认主题色及背景色配置，文件位于ant-design-vue-jeecg-master\src\defaultSettings.js和ant-design-vue-jeecg-master\vue.config.js中的primaryColor、 primary-color 和 link-color 保持一致。

主题色切换功能

• 首先，主题色和背景色切换功能一般在进入主页面后，右上角的系统设置内或者齿轮icon的位置上，点击后可看到右侧弹出相关主题配置，对应代码位置为 src\components\setting\SettingDrawer.vue，主题颜色加载的代码位于 src\components\tools\setting.js ，同时也是主题色变量primaryColor作用的位置。