vue引用public目录下文件的方式详解
有时候我们在开发h5时候，会有需要绑卡授权操作，这个时候需要同意某些协议并且这些协议是可以点击打开的，这种该怎么做呢？
其实这就是一个链接，前端能够打开链接并且常用的也就是a标签喝vue自带的router-link，当然其他还有，通常来说a标签就够了
关于协议的存储，这里简单说下，在实际开发中，协议存储有以下几种：
1、存放在前端，一种是直接放在public静态资源文件夹下，webpack打包不会对其处理，直接把文件复制到存放项目的工程目录下；还有一种就是托管在cdn上，类似静态资源托管，会有一个域名，这个域名下放的都是静态资源比如图片呀之类的。通常来说，第一种最简单。
2、存放在一个中台，这个中台不是系统不是一个项目，而是公司内一个组织划分，支撑着其他部门的项目，通常就是前端编写协议内容，然后把协议存放的绝对路径给到中台相应开发，他们会做些处理最后返回一个完整的带有域名的文件地址，比如http:xxxx/zyxj/1.html，然后把带有详细信息返回给前端，前端直接渲染。
以上俩种方法我都参与过，今天说第一种。
第一种就是把静态资源放在public里面，vue页面地址的话填写绝对路径，就是不需要带有public前缀，因为实际上线的话，webpack是吧public下面很多文件复制到根目录/或者某个项目目录下，比如/index.html,1.css,1.html或者myapp/index.html,1.css,1.html。
页面使用的话如截图：
⚠️注意⚠️ 上面说的情况生产部署到根目录下页面上使用的方法，但是我们怎么知道项目是不是部署到根目录呢？
1、配置文件查看项目部署位置：
如果你的项目不是部署在跟目录，但是也不知道具体部署到哪个目录，不用担心，只要在config文件做个判断如果是生产环境部署到哪里，如下：
const BASE_URL=process.env.NODE_ENV==='production'?'Utility':'/'
publicPath:BASE_URL
data(){
return {
publicPath:process.env.BASE_URL
}
}
总结
到此这篇关于vue引用public目录下文件的文章就介绍到这了,更多相关vue引用public文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue element ui用户展示页面的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
本文给大家收藏整理了关于vue面试题汇总的一些知识,需要的朋友可以参考下2018-03-03
background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等属性的缩写,本文我用动态绑定background-image来举例,感兴趣的朋友跟随小编一起看看吧2023-10-10
这篇文章主要介绍了在vue项目如何使用base64加密，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了解决vue watch数据的方法被调用了两次的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了uni-app 实现小程序登录注册功能,文中给大家介绍了实现思路，以及vuex和本地缓存的区别，需要的朋友可以参考下2019-10-10
element-ui 中使用upload多文件上传只请求一次接口
这篇文章主要介绍了element-ui 中使用upload多文件上传只请求一次接口，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
本文主要介绍了vue项目中使用require.context引入组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
vue+element-ui JYAdmin后台管理系统模板解析
这篇文章主要介绍了vue+element-ui JYAdmin后台管理系统模板解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要给大家介绍了关于el-tab设置默认激活的标签页实现步骤,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
最新评论