vue require引入静态文件报错

如果是通过向后端发送请求，动态的获取对应的文件数据流很容易做到文件的显示和加载。现在研究，一些不存放在后端而直接存放在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">
        <embed
          v-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>

最后实现的效果！

秒客网

vue require引入静态文件报错

相关文章