我使用VueCLI(+ Vuetify)搭建了一个小型前端。
我想渲染一个按钮,onClick
打开位于项目文件夹树中的pdf的新选项卡。
我遇到了一个错误,花费了数小时寻找原因,似乎需要修改webpack配置。
最终我读到了这个S/O答案; 使用React webpack文件加载器提供静态pdf文件
但是出现了include: paths -> paths is not defined
的错误。
我必须承认我不知道webpack在幕后是如何工作的,所以需要任何帮助。
我使用VueCLI(+ Vuetify)搭建了一个小型前端。
我想渲染一个按钮,onClick
打开位于项目文件夹树中的pdf的新选项卡。
我遇到了一个错误,花费了数小时寻找原因,似乎需要修改webpack配置。
最终我读到了这个S/O答案; 使用React webpack文件加载器提供静态pdf文件
但是出现了include: paths -> paths is not defined
的错误。
我必须承认我不知道webpack在幕后是如何工作的,所以需要任何帮助。
也许您不需要使用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添加一个新的加载器:
你可能已经将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]