Question

我试图将资产文件夹中的静态内容（img）链接到vue组件，但是收到“找不到模块：错误：无法解决”错误消息。

当我从根组件链接图像时，它可以解析，但是从其他组件链接时，在子文件夹中，列表无法解析。

请参见以下示例：

├── App.vue <-- src="./assets/logo.png" resolved
├── assets
│   └── logo.png
├── components
│   └── some-other-component.vue <-- src="./assets/logo.png" not resolved

我试图使用以下Webpack配置在vue.config.js中为'src'文件夹设置别名，但也没有运气：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@": require("path").resolve(__dirname, "src")
      }
    }
  }
}

我想知道是否有办法实现这一目标？

Answer 1

some-other-component.vue中没有解决该问题，因为您指定的路径指向src/components/assets/logo.png而不是src/assets/logo.png 使用../assets/logo.png或更高版本：@/assets/logo.png

Answer 2

他们在这里定义了

URL转换规则如果该URL是绝对路径（例如/images/foo.png），则将按原样保留。

如果URL以。开头，则将其解释为相对模块请求，并根据文件系统上的文件夹结构进行解析。

如果URL以〜开头，则其后的所有内容均被解释为模块请求。这意味着您甚至可以引用节点模块内的资产：

如果URL以@开头，则它也被解释为模块请求。这很有用，因为默认情况下，Vue CLI的别名是@到/ src。（仅模板）

https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules

如何配置Vue CLI 3以利用Webpack根文件夹别名？

2 个答案: