ViteJS 别名导入无法解析

Question

*将大型 monorepo 弹出的 React 应用程序转换为 vitejs，至少我正在尝试这样做。但是，我们在当前应用程序中使用了多个别名导入，我想将该功能保留在那里。我们目前正在使用 webpack。

ts.config 文件

  {
  "compilerOptions": {
    "target": "esnext",
    "allowJs": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "jsx": "preserve",
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"],
      "@src/*": ["src/*"],
      "@status/*": ["src/packages/status/*"],
      "@cli/*": ["src/packages/cli/*"],
    }
  },
  "include": [
    "./declarations.d.ts",
    "src",
  ],
}

vite.config 文件：

    import react from '@vitejs/plugin-react';
    import legacy from '@vitejs/plugin-legacy'
    import path from 'path';
    import { defineConfig } from 'vite';
    
    export default defineConfig({
      root: 'src',
      publicDir: './src/assets',
      plugins: [
        react({
          // Use React plugin in all *.jsx and *.tsx files
          include: '**/*.{jsx,tsx}',
          babel: {
            configFile: true,
          },
        }),
        legacy({
          targets: ['defaults', 'not IE 11']
        })
      ],
      resolve: {
        alias: {
          '@src': path.resolve(__dirname, './src'),
          '@status': path.resolve(__dirname, './src/packages/status'),
          '@cli': path.resolve(__dirname, './src/packages/cli')
        },
    
      },
      build: {
        outDir: 'build',
      },
      css: {
        preprocessorOptions: {
          scss: {
            quietDeps: true,
            javascriptEnabled: true,
          },
          sass: {
            quietDeps: true,
            javascriptEnabled: true,
          },
        },
      },
    });

项目结构如下：

 package.json
   vite.config
   ts.config
   src/
      packages/
      pages/
      index.html
      app/
         app.tsx

当我运行 viteserve src 时，我在控制台中看到的具体错误是

6:33:25 PM [vite] 内部服务器错误：无法解析从“src/packages/cli/pages/review/Review.tsx”导入“@cli/constants/ReviewText”。该文件存在吗？

已经搜索了实习生并尝试了几乎所有在 vite.config 和 ts.config 文件中声明别名的变体。奇怪的是，ts 编译器似乎至少识别了别名路径，因为当鼠标悬停在 import 语句上时，它向我显示了完整路径，所以我相信我的问题是 vite.config 别名...

Answer 1

我也遇到了这个问题并找到了解决方案。事实证明，Vite 在解析模块时使用了绝对路径，并且 Vite 也将其视为"src/*"包node_modules，这就是导致导入解析问题的原因。

为了解决这个问题，我所做的就是对我的 tsconfig.json 进行更改

    // tsconfig.json
    "baseUrl": ".",
        "paths": {
            "/src/*": ["src/*"]
        }

现在我可以导入任何我想要的模块，如下所示

// App.tsx
import { Home } from "/src/pages/Home";

这里的关键是为所有路径添加前缀/. 在你的情况下它会是

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