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

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

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

【相关推荐:《vue.js教程》】

最近公司的一个小游戏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})` : &#39;auto&#39;}">
    <img class="y-content__reward" :src="rewardImg" />
  </div>
</template>

<script>
  data: () => ({
    theme: &#39;blcak&#39;
  }),
  computed: {
    contentBg() {
      try {
        // this.theme是文件夹,将不同的皮肤放到不同的文件夹,用同样的命名
        return require(`@assets/img/${this.theme}/contentBg.png`)
      } catch (err) {
        return &#39;&#39;;
      }
    },
    rewardImg() {
      try {
        return require(`@assets/img/${this.theme}/rewardImg.png`)
      } catch (err) {
        return &#39;&#39;;
      }
    }
  }
</script>

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

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

// vue-cli配置
const imagesRule = config.module.rule(&#39;images&#39;);
imagesRule.uses.clear()        //清除原本的images loader配置
imagesRule
  .test(/white/.+.(jpg|gif|png|svg)$/)
  .use(&#39;url-loader&#39;)
    .loader(&#39;url-loader&#39;)
    .options({ name:"img/white/[name].[hash:8].[ext]", limit: 8192 })

// 加多一个主题的配置
config.module
  .rule(&#39;image2&#39;)
  .test(/black/.+.(jpg|gif|png|svg)$/)
  .use(&#39;url-loader&#39;)
    .loader(&#39;url-loader&#39;)
    .options({name:"img/black/[name].[hash:8].[ext]", limit: 8192 })
    
// 自定义webpack配置
rules: [
  {
    test: /white/.+.(png|svg|jpg|gif)$/,
    use: [
      {
      loader: &#39;url-loader&#39;,
        options: {
          limit: 8192,
          name: &#39;img/white/[name].[hash:8].[ext]&#39;,
        }
      }
    ],
  },
  {
    test: /black/.+.(png|svg|jpg|gif)$/,
    use: [
      {
      loader: &#39;url-loader&#39;,
        options: {
          limit: 8192,
          name: &#39;img/black/[name].[hash:8].[ext]&#39;,
        }
      }
    ],
  },
]

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

// webpack版本为4.x
class WebPackSouceManifest {
  // 将 `apply` 定义为其原型方法,此方法以 compiler 作为参数
  constructor(option = {}) {
    // 黑色主题的文件名
    this.blackManifestName = option.blackManifestName || &#39;js/blackManifest.json&#39; 
    // 白色主题的文件名
    this.whiteManifestName = option.whiteManifestName || &#39;js/whiteManifest.json&#39;
    this.blackJsonData = {
      code: 0,
      data: []
    }
    this.whiteJsonData = {
      code: 0,
      data: []
    }
    this.addFileToSouceManifest.bind(this)
  }

  apply(compiler) {
    // 指定要附加到的事件钩子函数
    compiler.hooks.emit.tapAsync(
      &#39;HashServiceWorkerStartPlugin&#39;,
      (compilation, callback) => {
        const allBuildFiles = Object.keys(compilation.assets)
        allBuildFiles.forEach((file) => {
          if (file.indexOf(&#39;white&#39;) !== -1) {
            this.addFileToSouceManifest(&#39;white&#39;, file)
          } else {
            this.addFileToSouceManifest(&#39;black&#39;, file)
          }
        })


        const sourceBlack = JSON.stringify(this.blackJsonData)
        const sourceWhite = JSON.stringify(this.whiteJsonData)
        compilation.assets[this.blackManifestName] = {
          source: () => {
            return sourceBlack;
          },
          size: () => {
            return sourceBlack.length;
          }
        }

        compilation.assets[this.whiteManifestName] = {
          source: () => {
            return sourceWhite;
          },
          size: () => {
            return sourceWhite.length;
          }
        }
        callback()
      }
    );
  }

  addFileToSouceManifest(type, file) {
    let fileItem = {
      src: file,
    }
    if (/.js$/.test(file)) {
      fileItem.type = &#39;text&#39;
    } else if (/.js.map$/.test(file)) {
      fileItem.type = &#39;json&#39;
    }
    if (type === &#39;white&#39;) {
      this.whiteJsonData.data.push(fileItem)
    } else {
      this.blackJsonData.data.push(fileItem)
    }
  }
}

module.exports = WebPackSouceManifest;

因此我们得到不同主题的图片列表json,在进入页面的时候通过ajax获取到列表之后对别表中的图片进行加载,虽然以上的做法可以实现需求,但是实在太过复杂?那还有没有轻松的方式呢?当然是有的。

优化方案

仔细分析上面的代码后她,我们最终要获得的是图片编译后的结果,所以如果我们能够生成一个图片对象,将图片的name当作key,图片编译后的结果当作value,那么上面的代码将可以简化为如下:

<template>
  <!-- 这里需要判断图片是否存在,如果不存在需要指定为auto,不然会引起404,导致系统告警 -->
  <div class="y-content" :style="{backgroundImage: contentBg ? `url(${contentBg})` : &#39;auto&#39;}">
    <img class="y-content__reward" :src="rewardImg" />
  </div>
</template>

<script>
  data: () => ({
    theme: &#39;middleEast&#39;
  }),
  computed: {
    contentBg() {
      // skinImage是跟组件下的字段
      return this.$root.skinImage[&#39;contentBg&#39;] // contentBg为name
    },
    rewardImg() {
      return this.$root.skinImage[&#39;rewardImg&#39;]
    }
  }
</script>

如此代码变得简洁,不需要通篇的require跟try catch,接下来我们来如何实现这个skinImage对象呢

答案就是使用webpack的require.context

通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块,具体用法这里不再赘述,

详细请查看官方文档 requirecontext

https://webpack.docschina.org/guides/dependency-management/#requirecontext

于是我们来写一个自动导入图片并生成skinImage对象的函数

const black = require.context(&#39;../black&#39;, true, /.(png|jpg|gif)$/);
const middleImageObj = {};
black.keys().forEach(path => {
  // 获取图片的key
  const key = path.slice(2, -4); 
  blackImageObj[key] = rawSkin(path);
});

这样子我们就得到了黑色主题的图片对象,由于require.context的执行是在编译过程而不是运行时,所以所有的参数只能是静态的,这里我们还需要将白色主题的图片也提前获取,如下

const black = require.context(&#39;../black&#39;, true, /.(png|jpg|gif)$/);
const middleImageObj = {};
black.keys().forEach(path => {
  // 获取图片的key
  const key = path.slice(2, -4); 
  blackImageObj[key] = rawSkin(path);
});

这样我们就得到了两个主题的图片对象,接下来只要将某一个对象赋值给根组件的skinImage,就大功告成了,是不是比起上面的要更简单,更简洁。

更多编程相关知识,请访问:编程入门!!

以上就是Vue中如何根据主题获取不同的资源切换图片的详细内容,更多请关注www.sxiaw.com其它相关文章!