今天给大家分享一个vuecli3.x + sass + .env环境变量实现网站换肤的效果。
本教程实现了，文字颜色、图片、背景图片的更换效果。
准备物料：
- 脚手架：vuecli3.x
- npm包：node-sass，sass-loader
- 环境变量文件：.env.a, .env.b
步骤：
1、创建一个项目
vue create skin_m2、安装npm包
cnpm i node-sass -Scnpm i sass-loader -S2、在跟目录新建两个环境变量文件
.env.a 内容
NODE_ENV = aVUE_APP_THEME = default.env.b 内容
NODE_ENV = bVUE_APP_THEME = blue3、修改package.json文件的scripts，如下
serve-a 和 serve-b、build-a 和 build-b 为自己新增的代码
serve-a 和 serve-b 为本地运行命令
build-a 和 build-b 为服务器 构建命令
package.json
4、新增vue.config.js，代码如下
vue.config.js
5、准备相关静态资源文件
静态资源
6、准备一个vue文件
index.vue
7、创建一个img.js文件，用来适配皮肤下面的
img.js
8、在main.js里面引入img.js，并吧img挂在到vue上
main.js
9、本地运行
npm run serve -a ,效果：
皮肤1
npm run serve-b, 效果
皮肤2
10、万事大吉。后续提交到仓库，服务器在构建的时候，根据不同的需要运行不同的构建命令，就可以切换不同的风格。
11、有需要源码的童鞋，可以关注，回复关键字：换肤，获取源码。
