webpack - 如何配置 Vue CLI 3 以利用 webpack 根文件夹别名?

标签 webpack vue.js vue-cli

我正在尝试将 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/

相关文章:

javascript - 运行时Angular 2 Webpack环境配置

javascript - 无法使用带有 load-google-maps-api-2 的 webpack 读取未定义的属性 'Autocomplete'

javascript - 如何使用vue js在前端显示错误信息?

javascript - Vue.js 中的依赖循环问题

typescript - 为什么 typescript loader 会导致 html webpack 插件出错?

javascript - 带有 WordPress 插件的 Webpack,最好的方法是什么?

javascript - 通过 blade (laravel) 将 Prop (数组)传递给 vue.js

vue.js - 如何将带有 Jest 的 Vue Test Utils 添加到现有的 Vue-CLI 3 项目中?

两个元素之间的 CSS 覆盖不同?

javascript - vue-cli项目修改端口号的方法