vue项目中下载静态资源里的pdf文件

1.把文件放在项目目录src/assets文件下

2.在项目是用a标签下载

        <a
          :href="require('@/assets/download.pdf')"
          download="使用说明.pdf"
          target="_blank"
        >
          <img src="@/assets/banner.png" class="bannerimg"
        /></a>

以上项目运行会报错

Failed to compile.
./src/assets/download.pdf 1: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 (Source code omitted for this binary file)

3.需要在vue.config.js中配置!!!

具体配置代码:
 

 configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    module: {
      rules: [{
        test: /\.pdf$/,
        use: [{
          loader: 'url-loader',
          options: {
            name: 'files/[name].[ext]'
          }
        }]
      }]
    }
  },

相关推荐

  1. vue 实现下载pdf格式文件

    2024-02-19 20:08:04       43 阅读
  2. vue项目实现doc/excel/pdf/txt/图片等文件预览

    2024-02-19 20:08:04       50 阅读
  3. vue前端-静态资源下载小坑记录

    2024-02-19 20:08:04       34 阅读
  4. vue 下载pdf以及其他文件方法

    2024-02-19 20:08:04       50 阅读
  5. vue3 项目 前端实现下载模板 csv文件

    2024-02-19 20:08:04       23 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-19 20:08:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-19 20:08:04       100 阅读
  3. 在Django里面运行非项目文件

    2024-02-19 20:08:04       82 阅读
  4. Python语言-面向对象

    2024-02-19 20:08:04       91 阅读

热门阅读

  1. 洛谷P1019:[NOIP2000 提高组] 单词接龙

    2024-02-19 20:08:04       57 阅读
  2. SQL常用语句

    2024-02-19 20:08:04       51 阅读
  3. Mysql基本函数

    2024-02-19 20:08:04       45 阅读
  4. 在Vue3中,父组件调用子组件中的方法

    2024-02-19 20:08:04       49 阅读
  5. 人工智能之数学基础【共轭梯度法】

    2024-02-19 20:08:04       45 阅读
  6. Linux系统之部署网页小游戏合集网站

    2024-02-19 20:08:04       49 阅读
  7. Linux中字符串使用单引号与双引号的区别

    2024-02-19 20:08:04       53 阅读
  8. keepalived的通信原理

    2024-02-19 20:08:04       51 阅读