jeecg-boot微服务中如何修改默认的主题

大家好，我是雄雄。

前言

上篇文章，我们分享了jeecg-boot微服务中新建接口后报错404的解决方法，文章地址为：jeecg-boot中新建接口后报错404的解决方法 - 掘金

今天，我们来看看在jeecg-boot微服务中，如何实现默认的主题颜色改变呢？

修改默认的配置

首先我们需要找到这个文件：defaultSetting.js，这里面均是默认的配置，文件就在src目录下面，很好找，这儿我们就不详细介绍了。

大家可以看看这个注释：

• 项目默认配置项
• primaryColor - 默认主题色
• navTheme - sidebar theme [‘dark’, ‘light’] 两种主题
• colorWeak - 色盲模式
• layout - 整体布局方式 [‘sidemenu’, ‘topmenu’] 两种布局
• fixedHeader - 固定 Header : boolean
• fixSiderbar - 固定左侧菜单栏 ： boolean
• autoHideHeader - 向下滚动时，隐藏 Header : boolean
• contentWidth - 内容区布局： 流式 | 固定
• storageOptions: {} - Vue-ls 插件配置项 (localStorage/sessionStorage)

可以根据上面的提示，我们可以知道，一般改的话就改primaryColor即可。

但是改完之后还不会生效，所以我们还需要改一个地方，就是vue.config.js,代码如下：

  /* 此处修改默认的样式 */
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          /* less 变量覆盖，用于自定义 ant design 主题 */
          'primary-color': '#0EBAAA',
          'link-color': '#0EBAAA',
          'border-radius-base': '4px',
        },
        javascriptEnabled: true,
      }
    }
  },

当我改完这个地方的时候，主题色变成原来的了，但是没有生效，这是怎么回事呢，我们可以这样去解决。

又把defaultSetting.js文件中的primaryColor改成别的值就可以了，看看问题是不是就解决了。