Vue自定义模块解析似乎不起作用答案

【问题标题】：Vue custom module resolution doesn't seem to workVue自定义模块解析似乎不起作用
【发布时间】：2019-03-07 04:46:26
【问题描述】：

更新

我解决了这个问题。答案在下面

问题

我通过vue/cli 创建一个新的vue 项目：vue create hello-world（他要求的所有选项都被选中）。

然后我在hello-world/libs/test-lib文件夹中创建一个index.ts文件，内容如下：

export const item = 1;

在main.ts 和home.vue 我导入了这个模块来使用它们：

import {item} from '@libs/test-lib';

console.log('item', item);

并在我的tsconfig.json 中添加：

 "@libs/*": [
   "libs/*"
  ]

我的vscode 正在解析这条路径。但是当我尝试运行build 或serve (npm run build) 结果，我得到一个错误：

./src/main.ts 中的@libs/test-lib， ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/ ts-loader??ref--13-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options !./src/views/Home.vue?vue&type=script&lang=ts&

要安装它，你可以运行： npm install --save @libs/test-lib

我想我是按照module-resolution guide from webpack 做的一切。

我们将不胜感激。

【问题讨论】：

标签： javascript node.js vue.js webpack webpack-4

【解决方案1】：

我找到了！

因为我使用babel和typescript（来自vue/cli的配置），所以我需要使用babel-plugin-module-resolver。

所以为了解决这个问题，我创建了babel 配置文件.babelrc，（在根目录中），内容如下：

{
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "@libs": "./libs"
        }
      }
    ]
  ]
}

我再次运行命令，它成功了！

【讨论】：