Блог

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

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

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

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

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

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

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

и MD теперь:

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

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

Оооочень хорошо, если я понял вашу точку зрения, мое решение выглядит следующим образом: 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)

Если по какой-либо причине вы не можете заставить его работать с 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)