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