Svelte：通过绝对路径导入不起作用

Question

我尝试使用文件的绝对路径导入枚举、对象、函数和精简组件，但编译器找不到它们。

这就是我进行导入的方式：

<script lang=ts>
    import { MyEnum } from "src/lib/enums";
    ... code ...
<script/>

VS Code 编译器不会抱怨路径。

运行应用程序时，我在窗口上收到以下错误消息：

[plugin:vite:import-analysis] Failed to resolve import "src/lib/enums" from "src\lib\GUI\ObjectOnBoard.svelte". Does the file exist?
35 |  
36 |  const { Object: Object_1 } = globals;
37 |  import { MyEnum } from "src/lib/enums";
   |                              ^

我做了一些研究，发现我的配置文件可能存在一些问题，但我不知道如何配置这些文件以使引用工作。这些是我的项目中的配置文件（我认为相关的？）：

vite.config.ts：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
})

svelte.config.js：

import sveltePreprocess from 'svelte-preprocess'

export default {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: sveltePreprocess(),
}

tsconfig.json：

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "resolveJsonModule": true,
    "baseUrl": ".",
    /**
     * Typecheck JS in `.svelte` and `.js` files by default.
     * Disable checkJs if you'd like to use dynamic types in JS.
     * Note that setting allowJs false does not prevent the use
     * of JS in `.svelte` files.
     */
    "allowJs": true,
    "checkJs": true,
    "isolatedModules": true,
  },
  "include": ["src/**/*.d.ts", "src/**/*.{svelte,ts,js}"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

---

下面给出的答案适用于编译代码，所以现在它实际上运行了，这太棒了！但 VS Code 自动完成和错误消息（红色波浪线）仍然存在一些问题。

指定绝对路径在 .svelte 文件内可以完美地工作，但在 .ts 文件中，即使代码编译并工作，打字稿仍会不断警告错误：

"Cannot find module 'src/lib/objects/outlet' or its corresponding type declarations."

此错误语句出现在文件“src/lib/MainDataStructure”中。

我尝试过“重新启动 TS Server”，但没有帮助。我看过这个问题，其中有很多关于如何解决这个问题的建议，但没有一个对我有用。

这是我当前的 tsconfig.json 文件：

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    /**
     * Typecheck JS in `.svelte` and `.js` files by default.
     * Disable checkJs if you'd like to use dynamic types in JS.
     * Note that setting allowJs false does not prevent the use
     * of JS in `.svelte` files.
     */
    "allowJs": true,
    "checkJs": true,
    "isolatedModules": true,
    "baseUrl": ".",
    "paths": {
      "src/*": [
        "src/*"
      ],
    }
  },
  "include": ["src/**/*.d.ts", "src/**/*.{svelte,ts,js}"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

这是我在项目中的目录的图像：

Answer 1

在节点模块分辨率（由 设置tsconfig/svelte）下，这些不是绝对文件路径。它们将被解释为相对于 Node 模块，在本例中为src。

如果您想引用本地文件，您可能必须首先通过以下方式定义路径别名tsconfig.json：

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

（如果您baseUrl是'.'，则该src文件夹必须与配置位于同一级别。）

使用 Vite 时，您可能还必须使其构建系统了解路径映射，例如存在vite-tsconfig-paths为此提供插件的包。

如果您不想要额外的依赖项或者这不起作用，您可以在以下位置自行指定别名vite.config.js：

// ...
import path from 'path';

export default defineConfig({
    // ...
    resolve: {
        alias: {
            src: path.resolve('src/'),
        },
    }
});

Vite 配置步骤对于构建工作非常重要，这tsconfig可能是使编辑器工具工作所必需的（例如 VS Code 中的代码完成和导航）。

注意：SvelteKit 有自己的配置来添加额外的别名。