本文将介绍在 vue 中实现 刷新切换背景图 的功能。大体可以分为如下三部分：
将背景图处理成方便使用的形式
在要使用的组件中引入背景图
将引入的背景图设置到 html 元素上
整理背景图
首先我们假设所有的背景图都存放在src/images/bg/文件夹下，分别为1.jpg、2.jpg和3.jpg，并且已经将src/images路径配置了别名images：
背景图的存放路径
如何配置路径别名?
在项目根目录下新建vue.config.js并填入以下内容即可，如果你是使用的是webpack的话请自行百度 “webpack如何添加路径别名”：
const { resolve } = require('path')
module.exports = {
configureWebpack: {
resolve: {
alias: {
'images': resolve('src/images')
}
}
}
}
为了方便使用，我们把所有的背景图都存放到一个数组里，在src/images/bg/中新建文件index.js并填入如下内容:
import bg1 from 'images/bg/1.jpg'
import bg2 from 'images/bg/2.jpg'
import bg3 from 'images/bg/3.jpg'
export default [ bg1, bg2, bg3 ]
通过import引入图片，我们就可以从对应的bg*变量中获取图片真实的资源路径。再通过export统一导出，就可以很方便的进行调用。
在组件中引入
接下来打开要设置背景图的vue组件，我们来将上面导出的背景图数组引入进来，在组件中做如下修改即可：
// 引入背景图
import allBackgroundImages from 'images/bg'
export default {
data: () => ({
// 将背景图存放在 data 里
allBackgroundImages
})
}
使用背景图
引入之后就可以使用了，这里先说一下我的思路，先新建一个样式的计算变量，这个计算变量会设置随机的背景图，然后在把这个计算变量绑定到要设置的html元素上。
先新建计算变量：
computed: {
backgroundImage() {
// 根据背景图数组的长度随机选择索引
const randIndex = Math.floor(Math.random() * this.allBackgroundImages.length)
return {
// 获取对应的图片资源并将其设置到`background-image`属性上
backgroundImage: `url(${this.allBackgroundImages[randIndex]})`
}
}
},
然后应用样式，这里假设要设置背景的html元素名为main-container:
...
这样就可以实现在页面刷新之后自动设置背景图了。
作者：HoPGoldy
