относительная ссылка в vue возвращается ни с чем - PullRequest
Новая
       36

относительная ссылка в vue возвращается ни с чем

0 голосов
/ 17 марта 2019

У меня есть два компонента, один с лайтбоксом для изображений и один для воспроизведения аудио.Я получил относительные ссылки на ресурсы, но либо изображения, либо аудио отображаются и воспроизводятся.Сначала я подумал, что это проблема самого компонента, но поскольку он не работает ни с одним из них, это может быть что-то еще.

Если я предоставлю абсолютный URL-адрес, по какой-то причине он работает, однако отлично

Это не работает ни при сборке приложения, ни локально: 

export default {
      components: {
        VueLitebox,
        "vue-audio": VueAudio
      },
      data() {
        return {
          // AUDIO
          file1: "../assets/music/myfile.mp3",

          // LITEBOX
          images: [
            ".../assets/img/myimage.jpg",

Это прекрасно работает:

export default {
  components: {
    VueLitebox,
    "vue-audio": VueAudio
  },
  data() {
    return {
      // AUDIO
      file1: "http://mypage.com/music/myfile.mp3",

      // LITEBOX
      images: [
        "http://mypage.com/img/myimage.jpg",

Конечно, я могу загружать изображения и музыку отдельно и заставить их работать, но это немного неудобно.

Что может быть не так?

ОБНОВЛЕНИЕ:

Спасибо за ответы.Теперь у меня есть два метода.И оба на самом деле работает.

Один из них - поместить все мои активы в общую папку.Это решается с помощью ссылки вроде: 

"/assets/img/myimage.jpg",

Другой способ заключается в использовании require.

require("../assets/img/myimage.jpg"),

Оба работают, но есть ли предпочтительный способ?

1 Ответ

1 голос
/ 17 марта 2019

Вы должны использовать требуют при использовании активов 

file1: require("../assets/music/myfile.mp3")

Без необходимости веб-пакет не будет знать, что вы хотите объединить этот ресурс, и ваш путь останется неизменным. На самом деле веб-пакет знает, как обрабатывать файлы такого типа с помощью плагинов, а не из коробки.

По поводу того, что он работает с абсолютным путем, а не с относительным. Ваш относительный путь действителен в локальной файловой системе на вашем dev-сервере. При развертывании приложения вы работаете не в локальной файловой системе, а в Интернете. Даже если относительные пути разрешаются с использованием аналогичного алгоритма, ваши результаты будут зависеть от URL-адреса, где используется компонент, а не от пути к файлу vue.

Например, если компонент отображается по URL-адресу вида 

https://example.com/list/

Относительный путь будет преобразован в https://example.com/assets, что, вероятно, то, что вы хотите. Но по следующему адресу 

 https://example.com/list/1/

Примет решение https://example.com/list/assest, что не соответствует ожиданиям.

Webpack заботится об этих проблемах (в некоторой степени вы должны быть уверены, что не испортили тег base ).

...