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 相关文章推荐
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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 curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
python中cPickle用法例子分享
2014/01/03 Python
itchat接口使用示例
2017/10/23 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
个人求职简历的自我评价
2013/10/19 职场文书
教师专业自荐书范文
2014/02/10 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
学雷锋宣传标语
2014/06/25 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
张思德观后感
2015/06/09 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android