静态资源路径替换问题

[chengked]

问题描述：打包时homePage指定为绝对路径，项目中使用IPreFetchLibOptions.hook.beforeAppendAssetNode 替换掉域名，然后发现图片无法显示，如图 期待效果：静态资源路径可以被替换

[fantasticsoul]

收，下一个版本支持

[chengked]

经过测试：以下代码可以实现远程库替换功能，经钟工提醒使用MutationObserver，简略实现，分享出来，加到./index.js文件中即可，如图： 代码如下： var mutationObserver = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.addedNodes.length === 0) return // console.log(mutation); mutation.addedNodes.forEach(addedNode =>{ // console.log('addedNode',addedNode.nodeName,addedNode) if (addedNode.innerHTML) { // 替换 addedNode.innerHTML = addedNode.innerHTML.replace('http://test-zxes.cc','http://test2-zxes.cc') //addedNode } }) }); }); // 开始监听页面根元素 HTML 变化。 mutationObserver.observe(document.documentElement, { // attributes: true, // 【是否监听属性变化】 // attributeFilter: undefined, //【监听的属性范围，如果设置为undefined | 没有设置表示监听全部的属性】 // attibuteOldValue: true, //【是否把 回调函数中的MutationRecord.oldValue 对象是否包含了更改前的数据 characterData: true, //【是否监听 内部子文本节点的数据发生变化】 // characterDataOldValue: true, // 【是否把 之前的数据发送给 MutationRrecord】 childList: true, //【是否 监听子节点的插入/删除】 subtree: true, // 【是否 把监听的范围扩展到内部的全部子孙节点】 });

[chengked]

经过测试：以下代码可以实现远程库替换功能，经钟工提醒使用MutationObserver，简略实现，分享出来，加到./index.js文件中即可，如图： 代码如下： var mutationObserver = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.addedNodes.length === 0) return // console.log(mutation); mutation.addedNodes.forEach(addedNode =>{ // console.log('addedNode',addedNode.nodeName,addedNode) if (addedNode.innerHTML) { // 替换 addedNode.innerHTML = addedNode.innerHTML.replace('http://test-zxes.cc','http://test2-zxes.cc') //addedNode } }) }); }); // 开始监听页面根元素 HTML 变化。 mutationObserver.observe(document.documentElement, { // attributes: true, // 【是否监听属性变化】 // attributeFilter: undefined, //【监听的属性范围，如果设置为undefined | 没有设置表示监听全部的属性】 // attibuteOldValue: true, //【是否把 回调函数中的MutationRecord.oldValue 对象是否包含了更改前的数据 characterData: true, //【是否监听 内部子文本节点的数据发生变化】 // characterDataOldValue: true, // 【是否把 之前的数据发送给 MutationRrecord】 childList: true, //【是否 监听子节点的插入/删除】 subtree: true, // 【是否 把监听的范围扩展到内部的全部子孙节点】 });

该测试代码在实际项目中存在一些问题，请谨慎使用

[chengked]

我觉得我搞的有点花里胡哨了，现在改成在vue mounted里直接将资源replace掉了，暂时用一用，等官方大佬出版本

function replace (id, source, target) { var elem = document.getElementById(id) var innerHTML = elem.innerHTML if (elem && innerHTML) { document.getElementById(id).innerHTML = innerHTML.replace(source, target) } }

[fantasticsoul]

我觉得我搞的有点花里胡哨了，现在改成在vue mounted里直接将资源replace掉了，暂时用一用，等官方大佬出版本

function replace (id, source, target) { var elem = document.getElementById(id) var innerHTML = elem.innerHTML if (elem && innerHTML) { document.getElementById(id).innerHTML = innerHTML.replace(source, target) } }

能达成目的就是好方法