首页 文章

Vue自定义模块分辨率似乎不起作用

提问于
浏览 次
0

UPDATE

我解决了这个问题 . 答案如下

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 /巴贝尔装载机/ lib目录./ node_modules / TS-装载机??参考！ - 13-3 ./ node_modules /缓存加载器/距离/ cjs.js ??裁判 - 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做了一切 .

enter image description here

Any help would be much appreciated.

javascript node.js vue.js webpack webpack-4

1 回答

  • 1

    I found it!

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

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

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

    我再次运行命令， And it worked!

    回复于

相关问题