主页 / coding / 问题 / 79495242
Accepted
CalebK
Asked: 2025-03-09 08:40:02 +0800 CST

VSCode 插件知道如何解析绝对导入路径，但 Node TypeScript 编译器却不知道

  • 772

我正在尝试遵循此处列出的一些最佳实践。我特别想确保我进行了绝对导入。我对 Node 和 Typescript 还不太熟悉，所以我预计我会经常移动文件。

因此我tsconfig.json使用建议的配置了我的文件

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

听起来它做的事情很简单。只需将“@/*”替换为相对于顶层的绝对源路径文件。这样，导入不会根据导入文件的位置而改变。

我的 VS 代码似乎能理解这一点。我不确定它是如何做到的，但 vscode 中有一个系统，如果我输入了错误的导入，就会出现这样的错误

导入失败

但如果我输入正确，就不会出现错误 导入成功

我的文件设置如下 文件设置如下

但是当我运行时，npm start终端中运行的东西好像正在运行与 VSCode 中运行的不同的东西，因为替换似乎不起作用。我收到一个错误：

TS2307: Cannot find module '@/components/WebsiteTitles' or its corresponding type declarations.

或者

ERROR in ./src/App.tsx 6:0-54
Module not found: Error: Can't resolve '@/components/WebsiteTitles' in '/Users/main/Coding/portfolio-website/src'

如果有帮助的话，我的本地主机是一台 Mac。

node.js

1 个回答

  1. Best Answer

    根据您的描述，我认为您使用 CRA（Create React App）来设置您的项目。

    CRA 不提供覆盖路径导入的简单方法，因为它隐藏了 Webpack 配置。不过，你仍然可以使用CRACO来实现这一点

    我建议检查网站、安装它并更新其中的脚本部分package.json。

    然后在项目的根目录中创建一个craco.config.js文件并添加以下配置来设置别名：

    const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
    },
  },
};

    完成此操作后，您应该能够在 React 项目中使用 @ 别名进行导入。不过，我个人建议使用Vite来设置您的项目。他们也使用它 :)

    • 2

相关问题