不懂vue@cli3项目模板使用public目录下静态文件的方法?其实想解决这个问题也不难,下面让小编带着大家一起学习怎么去解决,希望大家阅读完这篇文章后大所收获。
作为图片最好放在static目录下,但是vue@cli3没有static,网上都说放在public目录下,行,那就放吧,可问题是图片放了怎么使用
第一次尝试
肯定用绝对路径这就不说了,用相对路径,webpack会解析成base64,可是绝对路径怎么输都不对,咋回事
后面看网上说把前面路径下的public路径去掉,好,开发环境没问题了,可打包报错怎么办,就这个我研究了好久。
解决问题
网上一大堆牛头不对马嘴的,我也是无语了
最后的最后,终于官网找到了完美的解决方案
如此设置,完美解决问题,如果你留心观察过,你会发现,index.html文件的ico图标就已经这么使用了
<template> <div class="er"> <el-scrollbar > <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目录下静态文件的方法内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。