今天给大家分享一个vuecli3.x + sass + .env环境变量实现网站换肤的效果。

本教程实现了，文字颜色、图片、背景图片的更换效果。

准备物料：

• 脚手架：vuecli3.x
• npm包：node-sass，sass-loader
• 环境变量文件：.env.a, .env.b

步骤：

1、创建一个项目

vue create skin_m

2、安装npm包

cnpm i node-sass -Scnpm i sass-loader -S

2、在跟目录新建两个环境变量文件

.env.a 内容

NODE_ENV = aVUE_APP_THEME = default

.env.b 内容

NODE_ENV = bVUE_APP_THEME = blue

3、修改package.json文件的scripts，如下

serve-a 和 serve-b、build-a 和 build-b 为自己新增的代码

serve-a 和 serve-b 为本地运行命令

build-a 和 build-b 为服务器 构建命令

4、新增vue.config.js，代码如下

5、准备相关静态资源文件

6、准备一个vue文件

7、创建一个img.js文件，用来适配皮肤下面的

8、在main.js里面引入img.js，并吧img挂在到vue上

9、本地运行

npm run serve -a ,效果：

npm run serve-b, 效果

10、万事大吉。后续提交到仓库，服务器在构建的时候，根据不同的需要运行不同的构建命令，就可以切换不同的风格。

11、有需要源码的童鞋，可以关注，回复关键字：换肤，获取源码。