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 相关文章推荐
js添加table的行和列 具体实现方法
Jul 22 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
js实现石头剪刀布游戏
Oct 11 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下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
php7 新增功能实例总结
2020/05/25 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
python读取word文档的方法
2015/05/09 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Python使用sorted排序的方法小结
2017/07/28 Python
Python切片工具pillow用法示例
2018/03/30 Python
Python 一句话生成字母表的方法
2019/01/02 Python
简单分析python的类变量、实例变量
2019/08/23 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
道德演讲稿
2014/05/21 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
经济纠纷起诉状
2015/05/20 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB