在我的 vue 应用程序的 tsconfig 中忽略“路径”答案

【问题标题】："paths" being ignored in tsconfig in my vue application在我的 vue 应用程序的 tsconfig 中忽略“路径”
【发布时间】：2021-10-09 13:39:02
【问题描述】：

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

"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-typescript error with webpack alias, path not found:

我尝试更新我的 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
        ["/"]
      ),
    ],
  };
},

但我仍然遇到同样的错误

【问题讨论】：

标签： typescript vuejs2 tsconfig

【解决方案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"));
},

现在一切正常 :)

【讨论】：