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

Question

更新

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

问题

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

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

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进行了所有操作。

任何帮助将不胜感激。

Answer 1

我找到了！

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

因此，为解决该问题，我创建了babel配置文件.babelrc（在根目录中），其内容如下：

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

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