如果是通过向后端发送请求，动态的获取对应的文件数据流很容易做到文件的显示和加载。现在研究，一些不存放在后端而直接存放在vue前端项目中的静态媒体文件如何加载。         

       通常情况下，vue项目的图片jpg，png等都可以直接在@/assets文件中直接使用require直接引入，通过el-images加载或者直接使用img通过路径加载。

        但是，一些媒体文件mp4或者pdf等二进制数据文件在vue项目中直接存在@/assets目录下是无法通过require引入的。前端会直接报错无法找到对应的文件。

        那么归根结底还是项目中检索不到文件的位置。那怎么让项目能检索到文件的位置？

        我们都知道vue虽然是单页面应用，打包的时候，会出现

         会有一个静态资源文件夹，一些网站的logo会存在里面。那么如果我们直接在项目的public目录下的static目录下存放这些文件，是不是能被检索到呢？

         答案是可以~！

下面以引入存放在前端的pdf为例

 created() {let localhostPath = this.getHost();this.pdfs = [{id: 0,src: `${localhostPath}/static/icon/xxxx.pdf`,},]},methods: {getHost() {//获取当前主机地址let wPath = window.document.location.href;//获取地址后面参数let pathName = this.$route.path;let pos = wPath.indexOf(pathName);//去除地址后面的参数let localhostPath = wPath.substring(0, pos);return localhostPath;},},

        因为网页需要部署到公网上，如果src直接写/static/icon/xxxx.pdf会被nginx解析成路由，所以在路径前需要动态加上当前主机的ip或者网址。

         然后我们使用embed标签去触发浏览器自带的媒体编辑器~

    <el-dialog:visible.sync="loadVisible"top="0"width="60%":show-close="false"><div style="height: 100vh"><embedv-for="(pdf, index) in pdfs"v-if="index === currentPdf":key="pdf.id"type="application/pdf":src="pdf.src"width="100%"height="100%"/></div></el-dialog>

         最后实现的效果！