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获取元素样式属性值的方法
Dec 25 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
浅析创建javascript对象的方法
May 13 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 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/03 咖啡文化
php 模拟POST|GET操作实现代码
2010/07/20 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
js常用代码段收集
2011/10/28 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
vue与django集成打包的实现方法
2019/11/11 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
PyQt5每天必学之事件与信号
2018/04/20 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
python调用摄像头的示例代码
2020/09/28 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
数学检讨书1000字
2014/02/24 职场文书
经典毕业生求职信
2014/07/12 职场文书
规范化管理年活动总结
2014/08/29 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
起诉意见书范文
2015/05/19 职场文书
朋友聚会开场白
2015/06/01 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS