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 in ./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??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=ts&

To install it, you can run: 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"
        }
      }
    ]
  ]
}

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

Vue 自定义模块解析好像不行

Vue custom module resolution doesn't seem to work

javascript

node.js

webpack

vue.js

webpack-4