今天给大家分享一个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 为服务器 构建命令
![61e2e3e2ea2fa995969f043e69466401.png](https://img-blog.csdnimg.cn/img_convert/61e2e3e2ea2fa995969f043e69466401.png)
package.json
4、新增vue.config.js,代码如下
![59bbb360e59f86a86c23aac0c2fb9f2c.png](https://img-blog.csdnimg.cn/img_convert/59bbb360e59f86a86c23aac0c2fb9f2c.png)
vue.config.js
5、准备相关静态资源文件
![571a05ca9e7295073d78869ab9045d6e.png](https://img-blog.csdnimg.cn/img_convert/571a05ca9e7295073d78869ab9045d6e.png)
静态资源
6、准备一个vue文件
![e24770bf915a5de6305ba4e58aadaa23.png](https://img-blog.csdnimg.cn/img_convert/e24770bf915a5de6305ba4e58aadaa23.png)
index.vue
7、创建一个img.js文件,用来适配皮肤下面的
![c7e2791cb35c9f4dbd6a55a5f8284785.png](https://img-blog.csdnimg.cn/img_convert/c7e2791cb35c9f4dbd6a55a5f8284785.png)
img.js
8、在main.js里面引入img.js,并吧img挂在到vue上
![6a1f3d1ac9bad67fd12f83d168d2b623.png](https://img-blog.csdnimg.cn/img_convert/6a1f3d1ac9bad67fd12f83d168d2b623.png)
main.js
9、本地运行
npm run serve -a ,效果:
![fa3895cae58b0797dd073b6c40ca8f7b.png](https://img-blog.csdnimg.cn/img_convert/fa3895cae58b0797dd073b6c40ca8f7b.png)
皮肤1
npm run serve-b, 效果
![1dcadd09146a8dd6223fe1cf622dbe32.png](https://img-blog.csdnimg.cn/img_convert/1dcadd09146a8dd6223fe1cf622dbe32.png)
皮肤2
10、万事大吉。后续提交到仓库,服务器在构建的时候,根据不同的需要运行不同的构建命令,就可以切换不同的风格。
11、有需要源码的童鞋,可以关注,回复关键字:换肤,获取源码。