自己有個外包項目剛好涉及到皮膚的更換茬射，研究了好幾天沒找到正式環(huán)境中如何更換皮膚，當前最終還是搞定了冒签，雖然可能不是最有效的方法在抛，話不多話直接上代碼吧
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刪除
