Vue中如何根据主题获取不同的资源切换图片

Vue中如何根据主题获取不同的资源切换图片？下面本篇文章就来给大家介绍一下Vue优雅的实现多图片换肤需求的方法，希望对大家有所帮助。

最近公司的一个小游戏Y需要实现本土化主题，即不同地区需要展示不同的主题，而且游戏的图片众多，如何优雅快速得加载正确的皮肤图片就变得尤为重要。

css样式切换社区里已经有很多方案，可以自行参考，该文章已经讲得非常详细，这里不再赘述，本文主要讲讲如何根据主题获取不同的资源切换图片。

初始方案

图片换肤，根据以往经验，得益于webpack的依赖管理，我们一般是使用require引入图片。比如这种写法(require(`@assets/img/${theme}/bg.png`))，webpack会将@assets/img中的所有文件都加入到bundle中，从而在运行的时候可以找到对应的图片。具体实现如下：

<template>  <!-- 这里需要判断图片是否存在，如果不存在需要指定为auto，不然会引起404，导致系统告警 -->  <div class="y-content" :style="{backgroundImage: contentBg ? `url(${contentBg})` : 'auto'}">    <img class="y-content__reward" :src="rewardImg" />  </div></template> <script>  data: () => ({    theme: 'blcak'  }),  computed: {    contentBg() {      try {        // this.theme是文件夹，将不同的皮肤放到不同的文件夹，用同样的命名        return require(`@assets/img/${this.theme}/contentBg.png`)      } catch (err) {        return '';      }    },    rewardImg() {      try {        return require(`@assets/img/${this.theme}/rewardImg.png`)      } catch (err) {        return '';      }    }  }</script>

以上代码基本上能解决大部分的换肤需求，但是对于图片需要预先加载的项目，我们还需要区分不同主题的图片便于优化提前加载，由于编译后的图片链接跟编译前的链接是不同，因此我们获取编译后的图片链接。一般的项目中比如使用官方脚手架vue-cli构建的项目，所有的图片都会被url-loader处理后放到同一个文件夹image当中，这样编译前不同文件夹相同名字的图片编译后之后hash是不同，因此我们是无法区分不同主题的图片的。

于是，首先我们需要将不同的主题图片放置到不同的文件夹当中，同样适用用url-loader

// vue-cli配置const imagesRule = config.module.rule('images');imagesRule.uses.clear()        //清除原本的images loader配置imagesRule  .test(/white/.+.(jpg|gif|png|svg)$/)  .use('url-loader')    .loader('url-loader')    .options({ name:"img/white/[name].[hash:8].[ext]", limit: 8192 }) // 加多一个主题的配置config.module  .rule('image2')  .test(/black/.+.(jpg|gif|png|svg)$/)  .use('url-loader')    .loader('url-loader')    .options({name:"img/black/[name].[hash:8].[ext]", limit: 8192 })     // 自定义webpack配置rules: [  {    test: /white/.+.(png|svg|jpg|gif)$/,    use: [      {      loader: 'url-loader',        options: {          limit: 8192,          name: 'img/white/[name].[hash:8].[ext]',        }      }    ],  },  {    test: /black/.+.(png|svg|jpg|gif)$/,    use: [      {      loader: 'url-loader',        options: {          limit: 8192,          name: 'img/black/[name].[hash:8].[ext]',        }      }    ],  },]

这样子编译后不同主题的图片就会被放置到不同的文件夹当中，这样就结束了吗？还没有，我们还需要获取编译后的图片链接，才能在进入游戏页面的时候提前加载主题图片，这里我们可以写一个webpack plugin来帮我们收集相应的图片，生产各自主题的json文件。插件代码如下：

// webpack版本为4.xclass WebPackSouceManifest {  // 将 `apply` 定义为其原型方法，此方法以 compiler 作为参数  constructor(option = {}) {    // 黑色主题的文件名    this.blackManifestName = option.blackManifestName || 'js/blackManifest.json'     // 白色主题的文件名    this.whiteManifestName = option.whiteManifestName || 'js/whiteManifest.json'    this.blackJsonData = {      code: 0,      data: []    }    this.whiteJsonData = {      code: 0,      data: []    }    this.addFileToSouceManifest.bind(this)  }   apply(compiler) {    // 指定要附加到的事件钩子函数    compiler.hooks.emit.tapAsync(      'HashServiceWorkerStartPlugin',      (compilation, callback) => {        const allBuildFiles = Object.keys(compilation.assets)        allBuildFiles.forEach((file) => {          if (file.indexOf('white') !== -1) {            this.addFileToSouceManifest('white', file)          } else {            this.addFileToSouceManifest('black', file)          }        })          const sourceBlack = JSON.stringify(this.blackJsonData)        const sourceWhite = JSON.stringify(this.whiteJsonData)        compilation.assets[this.blackManifestName] = {          source: