Vue如何访问Public文件夹
人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站
https://www.captainai.net/shuai
说明
为什么需要访问Public文件夹的内容?
一般都是放在assets下面,但是无法实现动态访问,这就造成如果你要动态加载一个图片或者视频是不行的。
比如:我现在把testHuawei.mp4放在assets文件夹下面,那么他会被打包,这时候,运行,你找到这个图片,它的路径为:
http://localhost:8081/media/testHuawei.c4367207.mp4
多出一个c4367207(这是内部为了安全),这样你在写代码无法动态加载,因为只要是文件不一样,生成的数值也是不一样。
所以,我们有时候不需要生成一堆无用的数,可以把文件放在Public文件夹中,这样,里面的资源就不会被打包,可以直接用路径进行访问。
如何访问
首先在vue.config.js
在vue文件中使用
publicPath: process.env.BASE_URL
以上就可以直接访问,可以动态访问
字符串的拼接
这里可以根据电影的ID,就可以拼接成
1.mp4
2.mp4
3.mp4
这样就是实现了动态访问。
它的访问路径为
http://localhost:8081/1.mp4
http://localhost:8081/2.mp4
http://localhost:8081/3.mp4
扩展
常见
<img src="./assets/images/01.jpg" alt=""> // √
// 编译后:
<img src="/img/01.f0cfc21d.jpg" alt="">
常见的引入方式,路径是固定的字符串,图片会被webpack处理,文件若丢失会直接在编译时报错,生成的文件包含了哈希值
require
<img :src="require('./assets/images/03.jpg')" alt=""> // √
<img :src="require('./assets/images/'+ this.imgName +'.jpg')" alt=""> // √
<img :src="img3" alt=""> // √
<script>
export default:{data(){return {imgName:'03.jpg',img3:require('./assets/images/03.jpg'),}},
}
</script>
// 编译后:
<img src="/img/03.ea62525c.jpg" alt="">
当路径的文件名需要拼接变量的时候,可使用 require() 引入,在 template 的:src 或者 script 的 datacomputed 中都可以进行 require 引入或拼接
本文所用的
<img :src="this.publicPath + 'i.jpg'" alt=""> // √
// 编译后:
<img src="/foo/i.jpg" alt="">
<script>
export default:{data(){return {publicPath: process.env.BASE_URL,}},
}
</script>
//vue.config.js
module.exports = {publicPath:'/foo/',...
}
引入publicPath并且将其拼接在路径中,实现引入路径的动态变动。
Vue如何访问Public文件夹相关推荐
- vue-cli3访问public文件夹静态资源的报错解决
今天在项目中使用了public文件夹里的静态资源,在本地测试没有发现问题,但是项目部署到fat服务器却报了404错误. 我发现原因在于我的项目没有部署在域名的根部,而我引用public文件是通过绝对路 ...
- 使用 public 文件夹
public 文件夹包含 HTML 文件,因此你可以对其进行调整,例如,设置页面标题.带有编译代码的 如果将文件放入 public 文件夹,Webpack 将 不会 处理它.相反,它将被复制到构建文件 ...
- public文件夹访问
vue项目中的public文件夹 任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack.你需要通过绝对路径来引用它们. 引用public资源 在模板中,你首先需要向你的 ...
- Exchange2007中创建和访问公用文件夹
可以使用Exchang03的"系统管理控制台"来创建.管理和删除公用文件夹,也可以选择使用Exchang07内置的功能. 1.首先为公用文件夹创建一个公用文件夹数据库存储并连接. ...
- Spring Boot——自定义Web配置类后无法访问/static文件夹下静态资源
问题描述 自定义Web配置类后无法访问 /static文件夹下静态资源. 已加相关依赖包. 官方文档 Spring MVC Auto Configuration Maven <dependenc ...
- webpack打包vue项目之后dist文件夹在本地跑起来
webpack打包vue项目之后dist文件夹在本地跑起来 转载为:https://blog.csdn.net/u014054437/article/details/79981307 谢谢博主 亲测, ...
- 最迷幻的办法解决SpringBoot访问static文件夹下的静态资源
写SpringBoot的时候,想访问static文件夹下的资源,就是访问不到,一直到white page,在网上也搜了好多,试了好多方法都没用 然后我就想试一下public和resources下的资源 ...
- ftp windows无法访问此文件夹请确保输入的文件名_企业实战|企业FTP搭建
安装Vsftpd 提前关闭selinux 和firewalld防火墙 1.安装vsftp软件包 $ yum -y install vsftpd*2.启动vsftpd服务器 $ systemctl re ...
- ftp连接报错:Windows无法访问此文件夹
在zedboard上运行Linux系统,通过网线与PC端连接. 默认ftp地址是:192.168.1.10 通过FTP服务器访问该地址,报错:"ftp连接报错:Windows无法访问此文件夹 ...
最新文章
- client-go入门之1:创建连接Kubernetes集群的客户端
- 如何在 C# 中使用 MSMQ
- Apollo进阶课程㊵丨Azure仿真平台使用
- 4-输出基本数据类型
- 【转载】架构师需要了解的Paxos原理、历程及实战
- 「镁客·请讲」南京布塔:用动作捕捉世界的精彩
- 招聘 | 浙大杨杰课题组-博士后与科研助理-医学AI/NLP
- 2022年最新全国各省五级行政区划代码(省/市/区县/乡镇/村)
- 判断输入是否为元音字母
- ERP产品销售发货--发货管理(四十一)
- 算法题-双指针(最长的指定瑕疵度的元音子串(答案、解析))
- wlh机器人_恐怖谷理论,人类对仿真机器人的天生恐惧
- Java美元符号取值_java:我如何使用printf打印美元符号和带2位小数的双精度值?...
- 一心多用多线程-细谈java线程池submit与execute的区别
- THE FOOL 【找规律】
- CTF练习 TU-ctf-2016 pwn woO-50
- 人工智能程序可1秒检测出肠癌 准确率86% | 医疗
- [附源码]计算机毕业设计JAVA同德佳苑物业管理系统论文
- 2021年施工员-设备方向-岗位技能(施工员)考试试卷及施工员-设备方向-岗位技能(施工员)证考试
- boost asio ——深入框架