vue@cli3项目模板怎么使用public目录下的静态文件

作为图片最好放在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静态文件内容请搜索呐喊教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持呐喊教程！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。