Vue cli3 线上一键更换皮肤

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

vue本是单页面应用,每个页面都有一个

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

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

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

你可能感兴趣的:(Vue cli3 线上一键更换皮肤)