Question

我正在使用最新的 Vuepress 版本（1.0.0-alpha.46），并在根目录下配置了文档，并在其中存放了所有图像的assets文件夹中。

在markdown中引用这些图像没有问题。例如：

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

即使Webpack正在为assets/foobar.57589334.jpg之类的图像添加别名，效果也很好。可悲的是，当我在Vuepress中使用Vue组件时，事情开始崩溃。在这种情况下，我只是将其添加到我的markdown文件中：

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

但是现在我得到的字符串文字没有添加webpack的后缀。我知道我可以将图像放入.vuepress/public中，但这似乎是错误的，并且可能实际上将不需要的内容缓存在服务工作者中。在文档中，它讨论了如何使用别名配置webpack，我想尝试一下。我在.vuepress/config.js文件中配置了webpack：

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

并且MD现在是：

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

没有错误，但是也许字符串字符串刚被再次传入我的组件并不奇怪。我以为也许可以从Webpack进行某种导出，以强制它转换图像名称，但是我什么都没做。有人可以帮忙吗？

Answer 1

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)

Answer 2

如果由于某种原因您无法使其与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)

这样的别名

在Vue组件内（在Vuepress中）解析Webpack图像源

2 个答案: