Разрешить источник изображения веб-пакета в компоненте Vue (в Vuepress)

Я использую последнюю версию Vuepress (1.0.0-alpha.46), и у меня есть документы, настроенные вне корневого каталога, и у меня есть assets папка, в которой я храню все свои изображения.

Ссылка на эти изображения в уценке не проблема. Например:

![ ](../assets/foobar.jpg)

Работает нормально, даже если Webpack добавляет псевдоним к изображению типа assets/foobar.57589334.jpg. К сожалению, все начинает падать, когда я использую компонент Vue в своем Vuepress. В этом случае я просто добавляю это в свой файл уценки:

this is some markdown
<zoom-image src="../assets/foobar.jpg" />

Но теперь я получаю строковый литерал без добавления постфикса webpack. Я знаю, что мог поместить изображение в .vuepress/public, но это кажется неправильным и может фактически кэшировать в сервис-воркере вещи, которые мне не нужны. В документации рассказывается о том, как настроить webpack с псевдонимами, и я подумал, что попробую. Я настроил webpack в файле .vuepress/config.js:

configureWebpack: {
  resolve: {
    alias: {
      "@images": "assets"
    }
  }
},

и MD сейчас:

this is some markdown
<zoom-image src="~@images/foobar.jpg" />

Ошибок нет, но, возможно, неудивительно, что строковый литерал снова был передан в мой компонент. Я подумал, может быть, я смогу выполнить какой-то экспорт из веб-пакета, чтобы заставить его преобразовать имя изображения, но у меня ничего не работало. Кто-нибудь может помочь?


webpack vue.js vuepress
person ken    schedule 07.04.2019    source источник
comment
Если вы найдете способ заставить его работать, сообщите нам об этом   -  person r4fx    schedule 22.07.2019

Ответы (2)


arrow_upward
2
arrow_downward

Heellooooo там, если я понял вашу точку зрения, мое решение выглядит следующим образом: config.js:

configureWebpack: {
  resolve: {
    alias: {
      "@assets": path.resolve(__dirname, '../assets')
    }
  }
},

и моя файловая структура:

|-- .vuepress
|   |-- config.js
|-- assets
|   |-- icon.png
|-- guide
|   |-- 1.md
|   |-- 2.md
|   |-- 3.md
|   |-- 4.md

А затем используйте этот псевдоним, например: ![icon](~@assets/icon.png)

person li haochen    schedule 27.09.2019

arrow_upward
1
arrow_downward

Если по какой-то причине вы не можете заставить его работать с configureWebpack, попробуйте вместо этого chainWebpack.

const path = require("path"); // Don't forget this

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('@assets', path.resolve(__dirname, "../assets"))
  }
}

Моя структура

|-- .vuepress
|   |-- config.js
|-- assets
|   |-- foobar.jpg

Псевдоним типа ![My foobar](~@assets/foobar.jpg)

person Luis Rivera    schedule 03.09.2020