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.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
JavaScript 学习初步 入门教程
2010/03/25 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python3.3实现乘法表示例
2014/02/07 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
快速了解Python中的装饰器
2018/01/11 Python
用python实现对比两张图片的不同
2018/02/05 Python
Python如何将函数值赋给变量
2020/04/28 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
企业申诉管理制度
2014/01/30 职场文书
关于环保的演讲稿
2014/05/10 职场文书
英文演讲稿
2014/05/15 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
2016年安全月活动总结
2016/04/06 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
Python学习之包与模块详解
2022/03/19 Python
JavaScript前端面试组合函数
2022/06/21 Javascript