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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
javascript TextArea动态显示剩余字符
Oct 22 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 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
PHP开发需要注意的安全问题
2010/09/01 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Django中几种重定向方法
2015/04/28 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
Python global全局变量函数详解
2018/09/18 Python
python读取几个G的csv文件方法
2019/01/07 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
python scipy卷积运算的实现方法
2019/09/16 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
Android面试宝典
2013/08/06 面试题
学生实习推荐信范文
2013/11/26 职场文书
舞蹈教育学专业推荐信
2013/11/27 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
质量保证书范本
2014/04/29 职场文书
行政监察建议书
2014/05/19 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
房产电话营销开场白
2015/05/29 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
给学校的建议书400字
2015/09/14 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis