如何解决“无法解析'@/...'中的导入””vitest的问题？

Question

这是我得到的错误。我在“vite.config.ts”文件中定义的文件路径有问题。你能帮我吗？

错误信息：

FAIL  tests/utils/ConvertFromDomainToCountryCode.test.ts [ tests/utils/ConvertFromDomainToCountryCode.test.ts ]
Error: Failed to resolve import "@/constant" from "src/assets/ts/_utils/ConvertFromDomainToCountryCode.ts". Does the file exist?

ConvertFromDomainToCountryCode.test.ts

文件

import { describe, expect } from "vitest";
import { SetFlags } from "../../src/assets/ts/_utils/ConvertFromDomainToCountryCode.ts";

describe("Convert From Domain To CountryCode", () => {
  test("function defined", () => {
    expect(SetFlags).toBeDefined();
  });
});

当我将文件路径设置为“../../../constant/index”时，它工作正常。

ConvertFromDomainToCountryCode.ts

文件

import { COUNTRY_INFO } from "@/constant";

这里我添加了“别名”

vite.config.ts

文件

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve, dirname } from "node:path";
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    vue(),
    vueJsx()
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  },
  base: "/"
});

系统

OS: macOS 13.2.1
CPU: (8) arm64 Apple M1 Pro
Memory: 91.50 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.18.1/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
Browsers:
Chrome: 111.0.5563.64
Safari: 16.3
npmPackages:
@vitejs/plugin-vue: ^3.1.2 => 3.2.0
@vitejs/plugin-vue-jsx: ^3.0.0 => 3.0.0
@vitest/coverage-istanbul: ^0.29.3 => 0.29.3
vite: ^3.1.8 => 3.2.5
vitest: ^0.29.3 => 0.29.3

等待找到文件路径

Answer 1

我解决了这个错误。我将此代码添加到

vitest.config.ts

文件中。

resolve: {
  alias: [{ find: "@", replacement: resolve(__dirname, "./src") }]
}

Answer 2

有同样的问题，答案有助于解决它，但我想添加你可以从路径导入解析

import { resolve } from 'path'

如果您尚未在

@

中声明

tsconfig

但您有某些特定文件夹的动态路径，则只需指定它们即可。

resolve: {
  alias: [{ 
    find: "@server", 
    replacement: resolve(__dirname, './src/server/') 
  }]
}

Answer 3

在使用 Material ui 4 的代码上尝试使用 Material UI 图标 (v5) 提供的默认导入的材质图标时遇到错误。我使用的代码是：

import CheckCircleIcon from '@mui/icons-material/CheckCircle';

我收到的错误是：

[plugin:vite:import-analysis] Failed to resolve import "@mui/icons-material/CheckCircle" from "src/auth/components/Pricing/PricingTable.tsx". Does the file exist?

由于我使用的是 Material UI 版本 4，我需要将导入修改为：

import CheckCircleIcon from "@material-ui/icons/CheckCircle";

进行此更改后，问题得到解决，并且该组件完美运行。

Answer 4

使用

vite-tsconfig-paths

对我有用。这样，在

tsconfig.json

中定义的别名就会在

vitest.config.ts

中自动读取。

1. 安装

   npm install vite-tsconfig-paths --save-dev

2. 配置

   vitest.config.ts

   :

   import { defineConfig } from 'vitest/config';
   import { defineConfig as viteDefineConfig } from 'vite';
   import tsconfigPaths from 'vite-tsconfig-paths';
   
   export default defineConfig(
     viteDefineConfig({
       // ... other Vite configurations
       plugins: [tsconfigPaths()],
     }),
   );