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

Question

更新

我解决了问题。答案如下

问题

我通过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)时，我得到一个错误：

@libs/test-lib在./src/main.ts,./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？？

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

我想我做的每件事都是按照webpack的模块解析指南来做的。

任何帮助都将不胜感激。

Answer 1

我找到了！

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

因此，为了解决这个问题，我创建了babel配置文件.babelrc，（在根中）包含以下内容：

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

我又运行了命令，它起作用了！