Vue Loader 无法解析“@”答案

【问题标题】：Vue Loader Can't resolve '@'Vue Loader 无法解析“@”
【发布时间】：2019-10-27 15:01:02
【问题描述】：

版本

15.4.0

复制链接

https://codepen.io/fendi-tri-cahyono/pen/wbXKMZ?editors=0010

重现步骤

ERROR in ./node_modules/vue-extend-layout/vue-extend-layout.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-extend-layout/vue-extend-layout.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '@' in '/Users/fenditricahyono/Projects/titipbeliin/titipbeliin-vue/node_modules/vue-extend-layout'
 @ ./node_modules/vue-extend-layout/vue-extend-layout.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-extend-layout/vue-extend-layout.vue?vue&type=script&lang=js&) 50:19-96
 @ ./node_modules/vue-extend-layout/vue-extend-layout.vue?vue&type=script&lang=js&
 @ ./node_modules/vue-extend-layout/vue-extend-layout.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js

预期什么？

可以解决从'@/something.vue'导入一些东西，不仅仅从'../../something.vue'导入一些东西，

实际发生了什么？

找不到模块：错误：无法解析“/Users/fenditricahyono/Projects/titipbeliin/titipbeliin-vue/node_modules/vue-extend-layout”中的“@”

【问题讨论】：

Vue CLI v3 项目中的@ 别名来自default resolve configuration for Webpack。您的项目是使用 Vue CLI v3 创建/构建的吗？您的“重现步骤” 似乎没有任何步骤

标签： vue.js vue-loader

【解决方案1】：

为了扩展 Phil 的评论，我假设您没有使用 Vue CLI 初始化项目（通过您的 webpack 配置的外观），您正在寻找的应该是一个别名（用 @ 符号表示CLI 常用和/或生成的）映射到项目目录的根路径。所以尝试在resolve.alias 对象下添加以下额外行：

{
  // ...

  resolve: {
    alias: {
      // Relative path to your root dir (adjust accordingly)
      '@': path.resolve(__dirname, './src'),

      vue$: 'vue/dist/vue.esm.js',
    },
    extensions: ['*', '.js', '.vue', '.json'],
  },

  // ...
}

【讨论】：