<template>
<div>
...
<div id="shadow-dom" v-if="isTrueDomHidden"> ... </div>
<div class="true-dom" :class="{'is-hidden': isTrueDomHidden}"> ... </div>
...
</div>
</template>
<script>
export default {
data() {
return {
mainFeed: [], // mainFeed должна получаться и забираться где-то в другом месте внутри vue
isTrueDomHidden: true
}
},
mounted() {
if (this.mainFeed.length) setTimeout(() => {
this.isTrueDomHidden = false;
}, 2000);
}
};
</script>
{src: require('@/assets/file/1.jpg')}
происходит на этапе сборки и в код попадает уже что-то типа:{src: '/img/1.fd5gdf.jpg'}
или там {src: 'data:image/jpeg;base64,...'}
{src: a("18c2")}
, которое возвращает уже соответственно '/img/1.fd5gdf.jpg'
или 'data:image/jpeg;base64,...'
, т.е. результат обработки require('@/assets/file/1.jpg')
)test
же становится действительна только во время исполнения.{src: require(`@/assets/file/${test}.jpg`)}
, но никакой магии тут всё равно нет: в таких случаях webpack просто обрабатывает require для всех файлов по маске @/assets/file/*.jpg
(что может сильно раздуть размер бандла если в папке много лишнего мусора) и заменяет require(`@/assets/file/${test}.jpg`)
на соответствующую условную конструкцию с применением переменной test
.{src: require(test)}
ты не даёшь webpack'у даже намёка, на то что бы там следовало грузить и откуда. <template>
<div>
<div id="sp-7O1Ya5yaBAGp"></div>
</div>
</template>
<script>
export default {
mounted() {
(function(w, n) {
w[n] = w[n] || [];
w[n].push({
spId: "7O1Ya5yaBAGp",
blockId: "sp-7O1Ya5yaBAGp"
});
})(window, "superProjectRender");
},
head: {
script: [
{
src: "https://superproject.com/sp.js"
}
]
}
};
</script>