本文将介绍在 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组件，我们来将上面导出的背景图数组引入进来，在组件中做如下修改即可：

<script>
// 引入背景图
import allBackgroundImages from 'images/bg'
export default {
    data: () => ({
        // 将背景图存放在 data 里
        allBackgroundImages
    })
}
</script>

使用背景图

引入之后就可以使用了，这里先说一下我的思路，先新建一个样式的计算变量，这个计算变量会设置随机的背景图，然后在把这个计算变量绑定到要设置的html元素上。

先新建计算变量：

computed: {
    backgroundImage() {
        // 根据背景图数组的长度随机选择索引
        const randIndex = Math.floor(Math.random() * this.allBackgroundImages.length)
        return {
            // 获取对应的图片资源并将其设置到`background-image`属性上
            backgroundImage: `url(${this.allBackgroundImages[randIndex]})`
        }
    }
},

然后应用样式，这里假设要设置背景的html元素名为main-container:

<template>
    <div class="main-container" :style="backgroundImage">
        ...
    </div>
</template>

这样就可以实现在页面刷新之后自动设置背景图了。