1.圖片

前端項目/public/static/image文件夾下，兩張圖片，因為不會經常改變所以做成靜態(tài)資源

從項目中獲取這兩張圖片

//require.context（檢索目錄、是否檢索子文件、正則表達式匹配的）
const requireContext = require.context('../../../public/static/image/', false, /^\.\/.*$/) 
requireContext.keys().forEach(key=>{
	// console.log(key)    // 輸出./image.jpg
	let 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文件夾中放入模板文件：

實現(xiàn)效果：

代碼：

前端下載使用< 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{
      //這個是部署前端包時的包名，訪問靜態(tài)文件的時候需要加上包名（和vue.config.js里的publicPath保持一致）
      process: process.env.VUE_APP_NAME,  
      showDialog: false,
      fileList: [],
    }
  },
  methods:{
  	//打開下載模板dialog
    open() {
      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()的用法詳解文章來源地址http://www.zghlxwxcb.cn/news/detail-524230.html

到了這里，關于vue前端獲取項目下的靜態(tài)資源文件夾中的文件并下載的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！