3

我正在使用最新的Vuepress版本（1.0.0-alpha.46assets

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

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

即使 Webpack 正在为类似assets/foobar.57589334.jpg. 可悲的是，当我在 Vuepress 中使用 Vue 组件时，事情就开始崩溃了。在这种情况下，我只是将其添加到我的降价文件中：

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 中提取某种导出来强制它转换图像名称，但我没有得到任何工作。任何人都可以帮忙吗？

4

2 回答 2

2

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)

于 2019-09-27T07:49:30.947 回答
1

如果由于某种原因您无法使用configureWebpacktry withchainWebpack来代替它。

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)

于 2020-09-03T06:05:04.023 回答