vue@cli3 项目模板怎么使用public目录下的静态文件,找了好久都不对,郁闷!

2023-02-17,,,

作为图片最好放在static目录下,但是vue@cli3没有static,网上都说放在public目录下,行,那就放吧,可问题是图片放了怎么使用

第一次尝试

肯定用绝对路径这就不说了,用相对路径,webpack会解析成base64,可是绝对路径怎么输都不对,咋回事

后面看网上说把前面路径下的public路径去掉,好,开发环境没问题了,可打包报错怎么办,就这个我研究了好久。

解决问题

网上一大堆牛头不对马嘴的,我也是无语了

最后的最后,终于官网找到了完美的解决方案

如此设置,完美解决问题,如果你留心观察过,你会发现,index.html文件的ico图标就已经这么使用了

    <template>
<div class="er">
<el-scrollbar style="height:100%">
<div class="ds">
<img
class="sdde"
:src='`${publicPath}imges/but_play.png`'
>
</div>
</el-scrollbar>
</div>
</template> <script>
export default {
data() {
return {
publicPath: process.env.BASE_URL
}
},
components: {
} }
</script>

vue@cli3 项目模板怎么使用public目录下的静态文件,找了好久都不对,郁闷!的相关教程结束。

《vue@cli3 项目模板怎么使用public目录下的静态文件,找了好久都不对,郁闷!.doc》

下载本文的Word格式文档,以方便收藏与打印。