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


Posted in Javascript onJuly 07, 2020

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

第一次尝试

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

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

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

解决问题

网上一大堆牛头不对马嘴的,我也是无语了
最后的最后,终于官网找到了完美的解决方案

vue@cli3项目模板怎么使用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静态文件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
教你一步步实现一个简易promise
Nov 02 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 #Javascript
React+EggJs实现断点续传的示例代码
Jul 07 #Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 #Javascript
jQuery 动态粒子效果示例代码
Jul 07 #jQuery
Electron实现应用打包、自动升级过程解析
Jul 07 #Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 #Javascript
基于javascript处理nginx请求过程详解
Jul 07 #Javascript
You might like
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python入门篇之函数
2014/10/20 Python
python获取android设备的GPS信息脚本分享
2015/03/06 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
简单了解python的内存管理机制
2019/07/08 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
django页面跳转问题及注意事项
2019/07/18 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
存储过程和sql语句的优缺点
2014/07/02 面试题
临床医学专业个人的自我评价
2013/09/27 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
教师师德考核自我评价
2014/09/13 职场文书
投标售后服务承诺书
2015/04/29 职场文书
同事欢送会致辞
2015/07/31 职场文书