Vue cli3 线上一键更换皮肤

自己有个外包项目刚好涉及到皮肤的更换，研究了好几天没找到正式环境中如何更换皮肤，当前最终还是搞定了，虽然可能不是最有效的方法，话不多话直接上代码吧

vue本是单页面应用，每个页面都有一个<style>来写样式，我的办法是把所有页面的样式抽离出来，分成 dark/light 2个皮肤包放置到public目录下，不要说为什么我不放到src下 因为放到src下npm打包后css全部合并了，主题样式会被覆盖，所以要放置到public下，public下的css不会被打包，先看下我的目录

截屏2021-03-25 下午2.57.27.png

其中dark是黑暗系皮肤，light是亮色系皮肤,其中dark下是这样子的

截屏2021-03-25 下午2.59.10.png
因为我习惯采用stylus来写样式，所有配置了styl转css
light文件夹和dark内的文件是一摸一样的，只是css样式更改了

现在来引入css
我写了一个引入的组件，代码如下：

<template>
  <div>
    <remote-css
      :href="`/theme/${themeName}/element-ui.css`"
    />
    <remote-css
      :href="`/theme/${themeName}/Home.css`"
    />
<!--    引入全部css-->
  </div>
</template>

<script>
export default {
  name: 'ThemeLink',
  data () {
    return {
      themeName: window.config.dark ? 'dark' : 'light'
    }
  },
  components: { 'remote-css': {
    render (createElement) {
      return createElement('link', { attrs: { rel: 'stylesheet', href: this.href } })
    },
    props: {
      href: { type: String, required: true }
    }
  } }
}
</script>

<style scoped>

</style>

然后在项目入口页面引入这个组件

因为这种方式相当于加载的是远程css文件，所以切换皮肤时需要reload让项目重新加载，我这里直接把当前皮肤dark/light 存入到了localStorge中，项目重新加载后在main.js中根据localStorge的当前皮肤设置了下window.config.dark === localStorage.getItem('currentTheme') === 'dark'， 然后皮肤切换组件就会加载相应的css文件了

切记：样式抽离后的vue页面要把原先的style删除