美文网首页
vue 引入本地pdf文件

vue 引入本地pdf文件

作者: 多记录多学习 | 来源:发表于2022-11-07 18:43 被阅读0次

Cannot GET /static/test.pdf
本地引入pdf文件

   <iframe src="../../../../../static/test.pdf" frameborder="0" />

启动项目的时候报错不能加载对应类型的文件

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

需要配置file-loader对相应的文件进行编译

 yarn add file-loader -D
  {
          test: /\.pdf$/,
          loader: 'file-loader'
   }

再次启动项目成功。

成功引入后页面提示Cannot GET /static/test.pdf,控制台提示404无法找到对应的文件
由于一开始文件是放在assets文件夹下的,但是无果,我尝试放在static文件夹下还是失败,
最后看到说是需要将static下的文件打包后拷贝到static下,不然打包后的文件会不存在

const CopyPlugin = require('copy-webpack-plugin');
new CopyPlugin({
        patterns: [{ 
          from: path.resolve(__dirname, './static'),
          to: path.resolve(__dirname, './dist/static'),
        }]
})

再次启动项目就成功了。

相关文章

  • vue 引入本地pdf文件

    Cannot GET /static/test.pdf本地引入pdf文件 启动项目的时候报错不能加载对应类型的文件...

  • Vue——初始Vue & Vue的响应式原理 & Vue常用指令

    一、初始Vue 1、准备一个容器 2、引入vue.js文件 方式(1)引入本地vue.js文件 vue.js文件官...

  • 03第一个Vue实例 2019-07-28

    一、知识点总结 1、VUE引入的方式 引入本地Vue文件 通过CDN文件的方式 2、将用