在Vue3中点击链接下载文件（vue文件下载到指定路径）

我在用 Vue 3 重写我之前开发的 Vue 2项目的时候，在创建 Vue 3 的项目时没有直接在 HTML 里嵌入 vue 的 JavaScript 代码，而是通过 vue-cli 4.5.11 的方式创建的。发现它的项目文件的目录结构有所变化。

那么在项目里需要提供一个功能，就是在点击 HTML 里的<a>标签后并不是进行页面的跳转，而是要直接下载文件。此时<a>标签里的 href 路径就需要有所变化。

代码如下：

<a
href="./doc/Innova_Fellows_Scholarship_Application_Form.pdf"
class="btn btn-primary btn-lg app-btn" download="Innova_Fellows_Scholarship_Application_Form.pdf"
>
 <i class="fa fa-download mr-2"></i>
 Application Form
</a>

同时，文件放置的位置为：

这里就要注意，通过 vue-cli 创建的项目里，有一个 public 的目录，里面有你的首页文件 index.html，还有 img 目录。我在里面创建了一个新的目录叫做 doc，然后把 pdf 文件放在里面提供下载。

在你的 HTML 代码里，文件的地址就可以直接从 【 ./doc/****** 】开始，它会直接指向 public 这个目录。