自己有個(gè)外包項(xiàng)目剛好涉及到皮膚的更換，研究了好幾天沒(méi)找到正式環(huán)境中如何更換皮膚，當(dāng)前最終還是搞定了，雖然可能不是最有效的方法，話不多話直接上代碼吧
vue本是單頁(yè)面應(yīng)用，每個(gè)頁(yè)面都有一個(gè)<style>來(lái)寫(xiě)樣式，我的辦法是把所有頁(yè)面的樣式抽離出來(lái)，分成 dark/light 2個(gè)皮膚包放置到public目錄下，不要說(shuō)為什么我不放到src下 因?yàn)榉诺絪rc下npm打包后css全部合并了，主題樣式會(huì)被覆蓋，所以要放置到public下，public下的css不會(huì)被打包，先看下我的目錄
其中dark是黑暗系皮膚，light是亮色系皮膚,其中dark下是這樣子的
因?yàn)槲伊?xí)慣采用stylus來(lái)寫(xiě)樣式，所有配置了styl轉(zhuǎn)css
light文件夾和dark內(nèi)的文件是一摸一樣的，只是css樣式更改了
現(xiàn)在來(lái)引入css
我寫(xiě)了一個(gè)引入的組件，代碼如下：
<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>
然后在項(xiàng)目入口頁(yè)面引入這個(gè)組件
因?yàn)檫@種方式相當(dāng)于加載的是遠(yuǎn)程css文件，所以切換皮膚時(shí)需要reload讓項(xiàng)目重新加載，我這里直接把當(dāng)前皮膚dark/light 存入到了localStorge中，項(xiàng)目重新加載后在main.js中根據(jù)localStorge的當(dāng)前皮膚設(shè)置了下window.config.dark === localStorage.getItem('currentTheme') === 'dark'， 然后皮膚切換組件就會(huì)加載相應(yīng)的css文件了
切記：樣式抽離后的vue頁(yè)面要把原先的style刪除
