"paths" 在我的 vue 应用程序的 tsconfig 中被忽略

Question

我已经见过很多次了，但出于某种原因，我的“路径”对象无法正常工作。原来是这样设置的：

"paths": {
  "@/*": ["src/*"]
},

我已经更新为：

"paths": {
  "@/*": ["src/*"],
  "@graphql/*": ["src/_core/graphql/*"],
  "@components/*": ["src/_shared/components/*"],
  "@directives": ["src/_shared/directives"],
  "@models": ["src/_core/models"],
  "@logic/*": ["src/_shared/logic/*"]
},

当我尝试运行我的应用程序时，它抱怨说 没有找到依赖项 :

@components/layout/the-footer/the-footer.component.vue in ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/eslint-loader??ref--13-0!./src/app.component.ts?vue&type=script&lang=ts&

在我的 app.component.ts 文件中我有这个参考：

import TheFooter from "@components/layout/the-footer/the-footer.component.vue";

我的应用程序的结构是这样的：

谁能告诉我为什么我的路径不起作用？

我发现有几个人在使用 vue 时遇到这个问题： :

我尝试更新我的 vue.config.js 并在其中添加别名以匹配我的 tsconfig，如下所示：

configureWebpack: () => {
  if (process.env.NODE_ENV !== "production") return;

  return {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
        "@graphql/*": path.resolve(__dirname, "src/_core/graphql/*"),
        "@components/*": path.resolve(__dirname, "src/_shared/components/*"),
        "@directives": path.resolve(__dirname, "src/_shared/directives"),
        "@models": path.resolve(__dirname, "src/_core/models"),
        "@logic/*": path.resolve(__dirname, "src/_shared/logic/*"),
      },
    },
    plugins: [
      new PrerenderSpaPlugin(
        // Absolute path to compiled SPA
        path.resolve(__dirname, "dist"),
        // List of routes to prerender
        ["/"]
      ),
    ],
  };
},

但我仍然得到同样的错误

Answer 1

我实际上设法用插件解决了这个问题：

https://github.com/dividab/tsconfig-paths-webpack-plugin

我这样更新了我的 vue.config.js：

chainWebpack: (config) => {
  config.resolve.alias.delete("@");
  config.resolve
    .plugin("tsconfig-paths")
    .use(require("tsconfig-paths-webpack-plugin"));
},

现在一切正常:)

Answer 2

如果您正在使用 vue-cli，它可能更易于使用

https://www.npmjs.com/package/vue-cli-plugin-ts-paths

"paths" 在我的 vue 应用程序的 tsconfig 中被忽略

"paths" being ignored in tsconfig in my vue application

typescript

vuejs2

tsconfig