vueComponent / ant-design-vue-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design Vue like a Pro! (vue2)
https://pro.antdv.com
MIT License
10.74k stars 3.1k forks source link

部署之后为什么主题切换不了 #390

Closed free-pan closed 5 years ago

free-pan commented 5 years ago

Describe the bug (描述 Bug)

  1. 顶部总是显示正在切换主题
  2. 主题切换不了

To Reproduce (重现步骤)

这是我部署的实例地址: http://free_pan.gitee.io/ant-design-pro-vue-modify/#/welcome/index

  1. 使用admin/admin登录
  2. 进入之后顶部总是显示正在切换主题
  3. 切换主题, 但是没效果

Expected behavior(你期待的是什么?) 主题能够正常切换

Screenshots(截图) If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context(附加信息) Add any other context about the problem here.

free-pan commented 5 years ago

这是vue.config.js配置

const path = require('path')
const webpack = require('webpack')
const createThemeColorReplacerPlugin = require('./config/plugin.config')

function resolve (dir) {
  return path.join(__dirname, dir)
}

// vue.config.js
const vueConfig = {
  configureWebpack: {
    plugins: [
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ]
  },

  chainWebpack: (config) => {
    config.resolve.alias
      .set('@$', resolve('src'))

    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .oneOf('inline')
      .resourceQuery(/inline/)
      .use('vue-svg-icon-loader')
      .loader('vue-svg-icon-loader')
      .end()
      .end()
      .oneOf('external')
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'assets/[name].[hash:8].[ext]'
      })
  },

  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // less vars,customize ant design theme

          // 'primary-color': '#F5222D',
          // 'link-color': '#F5222D',
          // 'border-radius-base': '4px'
        },
        javascriptEnabled: true
      }
    }
  },

  devServer: {
    // development server port 8000
    port: 8000
    // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
    // proxy: {
    //   '/api': {
    //     target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
    //     ws: false,
    //     changeOrigin: true
    //   }
    // }
  },

  // disable source map in production
  productionSourceMap: false,
  lintOnSave: undefined,
  // babel-loader no-ignore node_modules/*
  transpileDependencies: [],
  // TODO 如果项目是发布在web服务器的非根目录,则需要指定项目的名称, 这里我发布到gitee, 所以指定了项目名称
  publicPath: process.env.VUE_APP_PROJECT_NAME + '/'
}

// preview.pro.loacg.com only do not use in your production;
// if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
//   // add `ThemeColorReplacer` plugin to webpack plugins
//   vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
// }
// TODO 用于在示例网站,加入主题切换功能(生产不建议使用)
vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())

module.exports = vueConfig

这是defaultSettings.js配置

/**
 * 项目默认配置项
 * primaryColor - 默认主题色, 如果修改颜色不生效,请清理 localStorage
 * navTheme - sidebar theme ['dark', 'light'] 两种主题
 * colorWeak - 色盲模式
 * layout - 整体布局方式 ['sidemenu', 'topmenu'] 两种布局
 * fixedHeader - 固定 Header : boolean
 * fixSiderbar - 固定左侧菜单栏 : boolean
 * autoHideHeader - 向下滚动时,隐藏 Header : boolean
 * contentWidth - 内容区布局: 流式 |  固定
 *
 * storageOptions: {} - Vue-ls 插件配置项 (localStorage/sessionStorage)
 *
 */

export default {
  primaryColor: '#52C41A', // primary color of ant design
  navTheme: 'dark', // theme for nav menu
  layout: 'sidemenu', // nav menu position: sidemenu or topmenu
  contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
  fixedHeader: false, // sticky header
  fixSiderbar: false, // sticky siderbar
  autoHideHeader: false, //  auto hide header
  colorWeak: false,
  multiTab: false,
  // TODO 设置为下面这种形式, 就可以去掉动态主题配置的组件(生产不建议使用)
  production: false,
  // production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true',
  // vue-ls options
  storageOptions: {
    namespace: 'pro__', // key prefix
    name: 'ls', // name variable Vue.[ls] or this.[$ls],
    storage: 'local' // storage name session, local, memory
  }
}
sendya commented 5 years ago

image

free-pan commented 5 years ago

@sendya 这种我知道, 我是想知道, 怎么进行动态切换. 我打包之后, 放到gitee上部署, 无法进行主题的动态切换, 但是在本地又是可以的.区别在于我本地是根目录, 而gitee不是根目录, 也就是说在非根目录部署时, 怎么使这个动态主题切换的组件, 变得有实际作用.

这是我部署的地址: http://free_pan.gitee.io/ant-design-pro-vue-modify/#/welcome/index 账号/密码: admin/admin

free-pan commented 5 years ago

@sendya 感谢你的回答, 我自己找到问题的原因, 并解决了该问题. 以下是解决办法:

之所以切换不了, 是因为该插件未加载到那个theme.css文件(因为我的发布地址还带有项目名). 所以在插件加载主题css文件时, 加上项目名就可以了. 只要修改src/SettingDrawer/themeColor.jschangeColor函数内changeUrl方法的返回值, 让返回值带上项目名就好了.

yixinagqingyuan commented 5 years ago

@free-pan 大佬,请教一下具体怎么改,我这边应该怎么找路径,我并没有找到src/SettingDrawer/themeColor.js文件啊

free-pan commented 5 years ago

@yixinagqingyuan 如果你需要在生产环境打包之后启用主题切换的功能,需要做如下操作:

  1. vue.config.js中启用主题切换插件. pro默认只在非生产环境启用该插件
  2. defaultSettings.js文件中production属性设置为false
  3. 在src目录新增index.less, 并在main.js中引入, 内容如下:
.ant-menu-dark .ant-menu-item-selected>a.router-link-active {
  color: #fff;
}
.ant-menu-dark .ant-menu-item-selected>a.router-link-active:hover {
  color: #fff;
}
yixinagqingyuan commented 5 years ago

好的,谢了

Charbo23 commented 5 years ago

@free-pan 请问这个第三步是必要的吗,前两步做了以后我看目前的样式就是这样的,似乎没有必要修改

free-pan commented 5 years ago

@Charbo23 第三步是因为我用的那个版本,当使用的是顶部菜单模式时, 无子菜单的根菜单, 会存在样式问题, 第三步的样式, 就是为了解决这个问题

xuxinping commented 4 years ago

@yixinagqingyuan 如果你需要在生产环境打包之后启用主题切换的功能,需要做如下操作:

  1. vue.config.js中启用主题切换插件. pro默认只在非生产环境启用该插件
  2. defaultSettings.js文件中production属性设置为false
  3. 在src目录新增index.less, 并在main.js中引入, 内容如下:
.ant-menu-dark .ant-menu-item-selected>a.router-link-active {
  color: #fff;
}
.ant-menu-dark .ant-menu-item-selected>a.router-link-active:hover {
  color: #fff;
}

大佬,请问vue.config.js中启用主题切换插件怎么启用? 我的配置如下 const path = require('path') const webpack = require('webpack') const ThemeColorReplacer = require('webpack-theme-color-replacer') const generate = require('@ant-design/colors/lib/generate').default

function resolve (dir) { return path.join(__dirname, dir) }

// vue.config.js module.exports = { /* Vue-cli3: Crashed when using Webpack import() #2463 https://github.com/vuejs/vue-cli/issues/2463

/ / pages: { index: { entry: 'src/main.js', chunks: ['chunk-vendors', 'chunk-common', 'index'] } }, */ configureWebpack: { plugins: [ // Ignore all locale files of moment.js new webpack.IgnorePlugin(/^.\/locale$/, /moment$/), // 生成仅包含颜色的替换样式(主题色等) new ThemeColorReplacer({ fileName: 'css/theme-colors[hash].css', matchColors: getAntdSerials('#1890ff'), // 主色系列 injectCss: true, // 改变样式选择器,解决样式覆盖问题 changeSelector (selector) { console.log(selector) switch (selector) { case '.ant-calendar-today .ant-calendar-date': return ':not(.ant-calendar-selected-date)' + selector case '.ant-btn:focus,.ant-btn:hover': return '.ant-btn:focus:not(.ant-btn-primary),.ant-btn:hover:not(.ant-btn-primary)' case '.ant-btn.active,.ant-btn:active': return '.ant-btn.active:not(.ant-btn-primary),.ant-btn:active:not(.ant-btn-primary)' case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover': case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover': return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover' default : return selector } } }) ] },

chainWebpack: (config) => { config.resolve.alias .set('@$', resolve('src'))

const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
  .oneOf('inline')
  .resourceQuery(/inline/)
  .use('vue-svg-icon-loader')
  .loader('vue-svg-icon-loader')
  .end()
  .end()
  .oneOf('external')
  .use('file-loader')
  .loader('file-loader')
  .options({
    name: 'assets/[name].[hash:8].[ext]'
  })
/* svgRule.oneOf('inline')
  .resourceQuery(/inline/)
  .use('vue-svg-loader')
  .loader('vue-svg-loader')
  .end()
  .end()
  .oneOf('external')
  .use('file-loader')
  .loader('file-loader')
  .options({
    name: 'assets/[name].[hash:8].[ext]'
  })
*/

},

css: { loaderOptions: { less: { modifyVars: { / less 变量覆盖,用于自定义 ant design 主题 /

      /*
      'primary-color': '#F5222D',
      'link-color': '#F5222D',
      'border-radius-base': '4px',
      */
    },
    javascriptEnabled: true
  }
}

},

devServer: { // development server port 8000 port: 9527, proxy: { '/jwt': { // target: 'http://localhost:9305', target: 'http://xpboot.cn:9305', // target: 'http://192.168.31.25:8765',

    pathRewrite: {
      '^/jwt': '/jwt/'
    }
  },
  '/api': {
    // target: 'http://localhost:9305',
    target: 'http://xpboot.cn:9305',
    // target: 'http://192.168.31.25:8765',

    pathRewrite: {
      '^/api': '/api/'
    }
  }
}

},

// disable source map in production productionSourceMap: false, lintOnSave: undefined, // babel-loader no-ignore node_modules/* transpileDependencies: [] }

function getAntdSerials (color) { // 淡化(即less的tint) const lightens = new Array(9).fill().map((t, i) => { return ThemeColorReplacer.varyColor.lighten(color, i / 10) }) const colorPalettes = generate(color) return lightens.concat(colorPalettes) } `

baiwumm commented 3 years ago

兄弟,解决了吗,我也遇到同样的问题