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-swipe class="swipe" autoplay="3000"><van-swipe-item v-for="(item,index) in imageList" :key="index" :title="item.name"><van-image width="100%" height="5rem" :src="item" :alt="item"/></van-swipe-item>
</van-swipe>

2.文件

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

实现效果：

代码：

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

<el-dialog title="下载模板" :visible.sync="showDialog" width="600px" @close="close"><transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul" v-show="fileList.length>0"><li class="el-upload-list__item ele-upload-list__item-content" v-for="(item,index) in fileList" :key="index"><el-link :underline="false" target="_blank"><a class="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部门在下面<style scoped>
.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>

export default {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()的用法详解