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

free-pan · 2019-08-23T04:07:21Z

Describe the bug （描述 Bug）

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

To Reproduce （重现步骤）

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

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

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

Screenshots（截图）
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: [e.g. iOS]
Browser [e.g. chrome, safari]
Version [e.g. 22]

Smartphone (please complete the following information):

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

Additional context（附加信息）
Add any other context about the problem here.

free-pan · 2019-08-23T04:09:35Z

这是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 · 2019-08-23T04:37:43Z

free-pan · 2019-08-23T19:55:59Z

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

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

free-pan · 2019-08-24T12:46:12Z

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

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

yixinagqingyuan · 2019-09-04T08:55:45Z

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

free-pan · 2019-09-05T11:36:44Z

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

vue.config.js中启用主题切换插件. pro默认只在非生产环境启用该插件
defaultSettings.js文件中production属性设置为false
在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 · 2019-09-06T03:58:06Z

好的，谢了

Charbo23 · 2019-09-18T11:42:22Z

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

free-pan · 2019-09-23T00:46:47Z

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

xuxinping · 2020-03-14T11:00:12Z

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

vue.config.js中启用主题切换插件. pro默认只在非生产环境启用该插件

defaultSettings.js文件中production属性设置为false

在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
vuejs/vue-cli#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 · 2021-01-28T08:20:18Z

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

free-pan closed this as completed Aug 24, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

free-pan commented Aug 23, 2019

free-pan commented Aug 23, 2019

sendya commented Aug 23, 2019

free-pan commented Aug 23, 2019 •

edited

Loading

free-pan commented Aug 24, 2019

yixinagqingyuan commented Sep 4, 2019

free-pan commented Sep 5, 2019

yixinagqingyuan commented Sep 6, 2019

Charbo23 commented Sep 18, 2019

free-pan commented Sep 23, 2019

xuxinping commented Mar 14, 2020

baiwumm commented Jan 28, 2021

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

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

Comments

free-pan commented Aug 23, 2019

free-pan commented Aug 23, 2019

sendya commented Aug 23, 2019

free-pan commented Aug 23, 2019 • edited Loading

free-pan commented Aug 24, 2019

yixinagqingyuan commented Sep 4, 2019

free-pan commented Sep 5, 2019

yixinagqingyuan commented Sep 6, 2019

Charbo23 commented Sep 18, 2019

free-pan commented Sep 23, 2019

xuxinping commented Mar 14, 2020

baiwumm commented Jan 28, 2021

free-pan commented Aug 23, 2019 •

edited

Loading