我正在尝试将 Assets 文件夹中的静态内容 (img) 链接到 vue 组件,但收到“找不到模块:错误:无法解析”错误消息。
当我从它解析的根组件链接图像时,但是从其他组件,在子文件夹中列表未解析。
请看下面的例子:
├── App.vue <-- src="./assets/logo.png" resolved
├── assets
│ └── logo.png
├── components
│ └── some-other-component.vue <-- src="./assets/logo.png" not resolved
我试图在 vue.config.js 中使用以下 Webpack 配置为“src”文件夹设置别名,但也没有成功:
module.exports = {
configureWebpack: {
resolve: {
alias: {
"@": require("path").resolve(__dirname, "src")
}
}
}
}
请问有什么办法可以实现吗?
最佳答案
他们在这里定义了它
URL Transform Rules If the URL is an absolute path (e.g. /images/foo.png), it will be preserved as-is.
如果 URL 以 . 开头,它将被解释为相关模块请求并根据文件系统上的文件夹结构进行解析。
如果 URL 以 ~ 开头,则其后的任何内容都被解释为模块请求。这意味着您甚至可以在节点模块中引用 Assets :
如果 URL 以 @ 开头,它也被解释为模块请求。这很有用,因为 Vue CLI 默认将 @ 别名为/src。 (仅模板)
https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules
关于webpack - 如何配置 Vue CLI 3 以利用 webpack 根文件夹别名?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51850567/