ошибка при открытии pdf-файла в vue.js из локальных папок проекта

Я работаю над веб-сайтом портфолио, и мне нужно открыть файл resume.pdf из локальных файлов при нажатии кнопки, но я не могу заставить его работать. Я использую gridsome и vue.js. Сначала я попробовал этот код:

<a class="cv-button float-right"
              href="../assets/resume.pdf"
              target="_blank">MY CV</a>

Но когда я нажимаю на ссылку (кнопку), я получаю эту ошибку:

Cannot GET /src/assets/resume.pdf

и URL-адрес, на который он идет:

http://localhost:8080/src/assets/resume.pdf

Проблема, с которой я столкнулся, уже задавалась ранее: Открытие PDF файл в другом окне с помощью VueJS и откройте PDF-файл с помощью VueJS.
Я пытался использовать предоставленные решения, но ни одно из них на самом деле не работало, и я каждый раз получал почти одну и ту же ошибку! У меня нет проблем с загрузкой изображений, но этот файл PDF просто не работает. Файл находится в src -> assets -> resume.pdf. Обратите внимание, что я пробовал много способов открыть файл, но все они не помогли, включая использование vue.js methods и windos.open() в javascript или ключевое слово required или использование различных способов указать путь к исходному файлу, например добавить @/assets/resume.pdf и т. д.
ниже мой файл package.json:

{
  "name": "portfolio.farzinnasiri.com",
  "version": "0.0.2",
  "private": true,
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/vue-fontawesome": "^0.1.9",
    "@gridsome/source-filesystem": "^0.6.2",
    "@gridsome/transformer-remark": "^0.5.0",
    "gridsome": "^0.7.0",
    "vue-typer": "^1.2.0"
  },
  "devDependencies": {
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2"
  }
}

предварительный просмотр веб-сайта находится здесь: http://farzinnasiri.ir. Конечно, я еще не добавил файл PDF, но теоретически, когда кто-то нажимает кнопку MY CV, он должен быть перенаправлен на файл резюме в браузере...


последнее, что я не смог найти файл PDF в окончательном построенном проекте (папка dist), поэтому, возможно, vue.js не может прочитать файл в первую очередь!
Пожалуйста, помогите мне здесь. спасибо за Ваше внимание


pdf vue.js gridsome
person FrastoFresto    schedule 24.05.2020    source источник
comment
Этот пост, скорее всего, поможет вам сделать то, что вы ищете title="импортировать локальный файл PDF в проект vue"> stackoverflow.com/questions/56925249/   -  person Bondsmith    schedule 24.05.2020

Ответы (1)


arrow_upward
2
arrow_downward

Итак, я исправил проблему в gridsome, просто поместив свои файлы PDF в каталог static, который gridsome создает при создании проекта. Gridsome помещает все из этой папки прямо в папку dist/, поэтому мне просто нужно было указать путь, например:

<g-link class="cv-button float-right" href="/resume.pdf" target="_blank">MY CV</g-link>
person FrastoFresto    schedule 25.05.2020
comment
Примечание. Все, чего нет в static/, будет скомпилировано средствами сборки — так что это правильный подход! - person vanblart; 06.07.2020