vue-直接打开本地文件下的pdf文件

背景：需求要求点击一个按钮可以打开pdf文件，这个文件是存储在本地的，如果直接写window.open()是无法打开的，尝试了多种方法后终于找到了一种方法能实现，记录一下。

介绍：url-loader是一个用于将文件转换为 base64 URI 的 webpack 加载器，作用是项目打包时，可以将符合条件的图片打包成base64 URL，减少http资源请求

注：在使用url-loader时，需要下载file-loader，因为url-loader的使用依赖于file-loader

vue.config.js配置：

const path = require('path');
const glob = require('glob');
// 打包时添加时间戳，区别版本
const Version = new Date().getTime();

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
  },
  configureWebpack: {
    resolve: {
        alias: {
          // 设置@/的意义
          '@': path.resolve(__dirname, 'src')
        }
    },
  },
  chainWebpack(config) {
    config.module.rule("pdf")
    .test(/\.pdf$/)
    .use("url-loader")
    .loader("url-loader").options({
      limit: 2,
      name: 'files/[name].[ext]'
    })
  },
}

pdf文件存放的相对路径：xx-portal\src\assets\如何获取企微群组机器人地址.pdf

项目打包后的相对路径：xx-portal\dist\files\如何获取企微群组机器人地址.pdf，

openPdf() {
    window.open(require('../../assets/如何获取企微群组机器人地址.pdf'))
},

require()是为了得到pdf的路径，并同时把文件放到打包文件夹里，原理是使用fs.readFile同步读取文件中的内容做相对应的解析，默认只支持js和json文件类型，导入其他的文件类型就无法识别了。但是有了loader，在配置中读取到.pdf结尾要用file-loader来处理，那就会把require()通过特定的语法解析为一个路径。

---

对配置这块不太了解，写的不对或者不全面的欢迎各位大佬指导，虚心求教~