美文网首页
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文件

          本文链接:https://www.haomeiwen.com/subject/jscitdtx.html