引入pdf文件后的配置

[1] 安装file-loader依赖：npm install file-loader
[2] webpack.base.conf.js中module.rules的部分添加对pdf文件路径的解析，可以参考上面已有的部分：

1
2
3
4
5
6
7

{
    test: /\.pdf$/,
    loader: 'file-loader',
    options: {
        name: utils.assetsPath('pdf/[name].[hash:7].[ext]')
    }
}

其中test用正则表达式解析文件类型，后面utils.assetsPath表示打包的路径，会通过utils.js自动判断是生产环境还是开发环境，从而在访问时指向不同的文件路径。hash用于build时生成哈希码在文件后。
[3] 也可以使用url-loader：

1
2
3
4
5
6
7
8

{
    test: /\.pdf$/,
    loader: 'url-loader',
    options: {
        limit: 0,
        name: utils.assetsPath('pdf/[name].[hash:7].[ext]')
    }
}

limit表示如果超过一定字节，将会自动转为file-loader进行加载。

引用pdf文件

script中通过data返回pdf的url，在组建中可以直接引用跳转：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
  import pdf from '../../assets/pdf/example.pdf'

  export default {
    name: 'example',
    components: {},
    data() {
      return {
        pdfUrl: pdf
      }
    },
    methods: {}
  }
</script>

示例

http://www.mooctest.org/#/Employ