hel icon indicating copy to clipboard operation
hel copied to clipboard

静态资源路径替换问题

Open chengked opened this issue 2 years ago • 5 comments

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

chengked avatar Aug 22 '23 01:08 chengked

收,下一个版本支持

fantasticsoul avatar Aug 22 '23 02:08 fantasticsoul

经过测试:以下代码可以实现远程库替换功能,经钟工提醒使用MutationObserver,简略实现,分享出来,加到./index.js文件中即可,如图: image 代码如下: 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 avatar Aug 22 '23 03:08 chengked

经过测试:以下代码可以实现远程库替换功能,经钟工提醒使用MutationObserver,简略实现,分享出来,加到./index.js文件中即可,如图: image 代码如下: 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 avatar Aug 22 '23 09:08 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) } }

chengked avatar Aug 22 '23 09:08 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 avatar Aug 23 '23 10:08 fantasticsoul