欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2021-07-04 09:24:04|栏目:vue|点击:

作为图片最好放在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-cli 构建骨架屏的方法示例

栏    目:vue

下一篇:vue+springboot+element+vue-resource实现文件上传教程

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

本文地址:http://www.codeinn.net/misctech/152181.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有