部署 Vue.js 应用程序后下载 PDF 的问题

Question

所以我正在创建一个 Vue.js 网络应用程序作为我的简历。在那里，我希望用户能够真正下载我的简历副本，但我似乎无法让它正常工作。在我的Home.vue 页面上，我有：

<template>
  <div class="flex-grow overflow-auto max-h-screen w-full dark:text-gray-300">
    <div class="m-auto pt-4 lg:grid lg:grid-cols-2 lg:grid-rows-2 lg:gap-8">
      <div class="m-auto">
        <img class="rounded-md" alt="headshot" src="../assets/headshot.jpg">
      </div>
      <div class="m-auto">
        <h2 class="text-2xl pl-2 py-4 text-center lg:text-left lg:text-8xl lg:px-8">Quick blurb</h2>
      </div>
      <div class="lg:col-span-2 mx-auto lg:h-8">
        <p class="text-base text-center lg:text-2xl">
          <a href="mailto:example@example.com">Email</a>
          &nbsp;|&nbsp;
          <a href="https://www.linkedin.com" target="_blank">LinkedIn</a>
          &nbsp;|&nbsp;
          <a href="https://github.com" target="_blank">GitHub</a>
          &nbsp;|&nbsp;
          <a href="my_resume.pdf" download>Resume</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Home'
}
</script>

当我在本地运行它时，下载它没有问题。当我运行yarn build 并从dist/ 运行服务器时，下载它没有问题。只有当我在 AWS Amplify 上部署它并从那里测试它时，我才会遇到问题（基本上就像它找不到它一样）。我试过放

<a href="/my_resume.pdf" download>Resume</a>

还有

<a :href="`${publicPath}my_resume.pdf`" download>Resume</a>
....
data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

无济于事。它位于public/ 文件夹中，还有index.html 和一个可以毫无问题地访问的图标。我不知道问题是什么。

Answer 1

我不知道你使用什么版本的 vue 以及你是如何配置你的 webpack 的，所以我不知道我的解决方案是否适合你，但我走了：

1. 将 assets 文件夹添加到您的公用文件夹并在其中添加您的 pdf： example

2. 到您的源文件夹添加文件 vue.config.js 如果它还没有：example

1. 在 vue.config.js 中将 assets 定义为 assets 文件夹：

module.export ={
  assetsDir: 'assets'
}

<a href="assets/my_resume.pdf" download>Resume</a>

这里是文档：https://cli.vuejs.org/config/#assetsdir