vue前端获取项目下的静态资源文件夹中的文件并下载

1.图片

前端项目/public/static/image文件夹下，两张图片，因为不会经常改变所以做成静态资源

从项目中获取这两张图片

//require.context（检索目录、是否检索子文件、正则表达式匹配的）const requireContext = require.context('../../../public/static/image/',false,/^\.\/.*$/) 
requireContext.keys().forEach(key=>{// console.log(key)    // 输出./image.jpglet file = key.substring(2)this.imageList.push('../../../static/image/'+file)})

html：

<!--展示轮播图--><van-swipeclass="swipe"autoplay="3000"><van-swipe-itemv-for="(item,index) in imageList":key="index":title="item.name"><van-imagewidth="100%"height="5rem":src="item":alt="item"/></van-swipe-item></van-swipe>

2.文件

前端项目的 \public\static\faultFile文件夹中放入模板文件：

实现效果：

代码：

前端下载使用< a >标签的自带的download下载

<el-dialogtitle="下载模板":visible.sync="showDialog"width="600px"@close="close"><transition-groupclass="upload-file-list el-upload-list el-upload-list--text"name="el-fade-in-linear"tag="ul"v-show="fileList.length>0"><liclass="el-upload-list__item ele-upload-list__item-content"v-for="(item,index) in fileList":key="index"><el-link:underline="false"target="_blank"><aclass="el-icon-download"style="color:#1890ff;margin-left: 7px;":href="process+'/static/faultFile/'+item":download="item">{{item}}</a></el-link></li></transition-group></el-dialog>

......js部门在下面

<stylescoped>.upload-file-uploader{margin-bottom: 5px;}.upload-file-list .el-upload-list__item{border: 1px solid #e4e7ed;line-height: 2;margin-bottom: 10px;position: relative;}.upload-file-list .ele-upload-list__item-content{display: flex;justify-content: space-between;align-items: center;color: inherit;}.ele-upload-list__item-content-action .el-link{margin-right: 10px;}</style>

exportdefault{name:"DownTemplate",data(){return{//这个是部署前端包时的包名，访问静态文件的时候需要加上包名（和vue.config.js里的publicPath保持一致）process: process.env.VUE_APP_NAME,showDialog:false,fileList:[],}},methods:{//打开下载模板dialogopen(){this.showDialog =true//获取文件夹中的文件名称，放进fileList中const files = require.context("../../../../../public/static/faultFile/",true,/\.doc$/);//只获取文件夹中.doc结尾的文件
      files.keys().forEach(item=>{this.fileList.push(item.substring(2))})},close(){this.fileList =[]},},}

参考文章：require.context()的用法详解