Wie erhält man in Vue unterschiedliche Ressourcen und tauscht Bilder je nach Thema aus? Der folgende Artikel stellt Ihnen Vues elegante Methode zur Realisierung von Multi-Image-Skins-Anforderungen vor. Ich hoffe, dass er Ihnen hilfreich sein wird.
[Verwandte Empfehlung: „vue.js Tutorial“]
Kürzlich muss ein kleines Spiel Y des Unternehmens ein lokalisiertes Thema implementieren, das heißt, verschiedene Regionen müssen unterschiedliche Themen und das Spiel anzeigen hat viele Bilder, wie man elegant aussieht. Das schnelle Laden des richtigen Hautbildes wird besonders wichtig.
In der CSS-Style-Switching-Community gibt es bereits viele Lösungen. Der Artikel wurde bereits ausführlich beschrieben, daher werde ich hier nicht näher darauf eingehen, wie man verschiedene Ressourcen erhält um Bilder je nach Thema zu wechseln.
Bild-Reskinning, basierend auf früheren Erfahrungen, dank der Abhängigkeitsverwaltung von Webpack verwenden wir normalerweise „require“, um Bilder einzuführen. Wenn Sie beispielsweise(require(`@assets/img/${theme}/bg.png`))schreiben, speichert Webpack alle Dateien in@assets/img code> Alle werden dem Bundle hinzugefügt, sodass die entsprechenden Bilder zur Laufzeit gefunden werden können. Die spezifische Implementierung ist wie folgt: (require(`@assets/img/${theme}/bg.png`))，webpack会将@assets/img中的所有文件都加入到bundle中，从而在运行的时候可以找到对应的图片。具体实现如下：
以上代码基本上能解决大部分的换肤需求，但是对于图片需要预先加载的项目，我们还需要区分不同主题的图片便于优化提前加载，由于编译后的图片链接跟编译前的链接是不同，因此我们获取编译后的图片链接。一般的项目中比如使用官方脚手架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.x class 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: () => { 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 = 'text' } else if (/.js.map$/.test(file)) { fileItem.type = 'json' } if (type === 'white') { this.whiteJsonData.data.push(fileItem) } else { this.blackJsonData.data.push(fileItem) } } } module.exports = WebPackSouceManifest;
因此我们得到不同主题的图片列表json，在进入页面的时候通过ajax获取到列表之后对别表中的图片进行加载，虽然以上的做法可以实现需求，但是实在太过复杂？那还有没有轻松的方式呢？当然是有的。
仔细分析上面的代码后她，我们最终要获得的是图片编译后的结果，所以如果我们能够生成一个图片对象，将图片的name
vue-clierstellt wurden, werden alle Bilder von
url-loaderverarbeitet und im selben Ordner image abgelegt, wodurch sie kompiliert werden
Bilder mit demselben Namen in verschiedenen Ordnern
Nach der Kompilierung ist derHashunterschiedlich, sodass wir Bilder zu unterschiedlichen Themen nicht unterscheiden können.
Also müssen wir zuerst verschiedene Themenbilder in verschiedenen Ordnern ablegen. Das Gleiche gilt für die Verwendung des URL-Loaders.
const black = require.context('../black', true, /.(png|jpg|gif)$/); const middleImageObj = {}; black.keys().forEach(path => { // 获取图片的key const key = path.slice(2, -4); blackImageObj[key] = rawSkin(path); });
rrreeAlso erhalten wir die JSON-Bildliste verschiedener Themen, indem wir die Liste über Ajax abrufen und dann die Bilder in die anderen Tabellen laden die Bedürfnisse, es ist zu kompliziert? Gibt es eine einfache Möglichkeit? Natürlich gibt es das.
Optimierungsplan
Nachdem wir den obigen Code sorgfältig analysiert haben, möchten wir letztendlich das kompilierte Ergebnis des Bildes erhalten. Wenn wir also ein Bildobjekt generieren können, ist das picture Dernamewird als Schlüssel und das kompilierte Ergebnis des Bildes als Wert verwendet. Dann kann der obige Code wie folgt vereinfacht werden:
const black = require.context('../black', true, /.(png|jpg|gif)$/); const middleImageObj = {}; black.keys().forEach(path => { // 获取图片的key const key = path.slice(2, -4); blackImageObj[key] = rawSkin(path); });
Auf diese Weise wird der Code prägnant , und es ist nicht erforderlich, den gesamten Artikel zu erfordern und zu versuchen. Wie implementieren wir dann dieses SkinImage-Objekt? Die Antwort besteht darin, den require.context des Webpacks zu verwenden. Rufen Sie einen bestimmten Kontext ab, indem Sie die Funktion require.context ausführen Wird hauptsächlich zum Implementieren automatischer Importmodule verwendet. Wenn Sie viele Module aus einem Ordner importieren, werden die angegebenen Dateien im Ordner durchlaufen und dann automatisch importiert Das Importmodul muss jedes Mal explizit aufgerufen werden. Die spezifische Verwendung wird hier nicht beschrieben.
Bitte überprüfen Sie das offizielle Dokument requirecontexthttps://webpack.docschina.org/guides/dependency-management/#requirecontext
Also schreiben wir eine Funktion, die automatisch Bilder importiert und SkinImage-Objekte generiertrrreeeAuf diese Weise erhalten wir das schwarze Design-Bildobjekt. Da require.context während des Kompilierungsprozesses und nicht zur Laufzeit ausgeführt wird, können alle Parameter nur statisch sein . Hier müssen wir auch das weiße Themenbild wie folgt erhalten: rrreeeAuf diese Weise erhalten wir die Bildobjekte der beiden Themen. Als nächstes müssen wir nur noch ein bestimmtes Objekt dem SkinImage der Stammkomponente zuweisen , und wir sind fertig. Ist es einfacher und prägnanter als das oben Gesagte? Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !Das obige ist der detaillierte Inhalt vonSo erhalten Sie verschiedene Ressourcen und wechseln Bilder je nach Thema in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
