服务器静态PDF-Vue CLI-Webpack-问题

Question

多亏了VueCLI（+ Vuetify），我才有所建树。

我想渲染一个按钮，在其中onClick打开一个新标签，该标签位于项目的文件夹树中。

我有一个错误，几个小时后寻找原因，似乎是要修改的webpack conf。

我终于在S / O上阅读了这个答案；使用React Webpack文件加载器提供静态pdf

但是我说错了 include: paths -> paths is not defined

我不得不承认我不知道webpack如何在幕后工作，因此可以找到任何帮助。

Answer 1

您可能不需要Webpack：您可以将其放在静态文件夹中并链接到<a href="/static/mypdf.pdf">pdf</a>。如果要使用Webpack路由，请将其放入src / assets目录并导入并将其添加到数据对象中：

import pdf from '../assets/mypdf.pdf'

//...
data: () => ({ pdf })
//...

然后使用组件中的链接：

<a :href="pdf">pdf</a>

您可能已添加include: paths到加载器配置中，但未定义它，而不是修改图像加载器，而是为PDF添加了一个新的：

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

您可以[name].[hash:7].[ext]根据需要进行更改，例如要pdfs在资产中添加目录，而不要使用将要使用的基本资产目录：pdfs/[name].[hash:7].[ext]