Svelte：使用绝对路径导入不起作用。

Question

Svelte：使用绝对路径导入不起作用。

5

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

这是我导入它们的方式：

<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文件中，即使代码编译成功并正常工作，typescript仍然会发出警告。

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

这个错误出现在“src/lib/MainDataStructure”文件中。

我尝试了“重新启动TS服务器”，但没有帮助。我查看了这个问题，里面有很多解决方法，但都对我没用。

这是我的当前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" }]
}

这是我项目目录的图片:

- Ólavur Nón

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- H.B. · Accepted Answer

在 Node 模块解析下（由 tsconfig/svelte 设置），这些不是绝对文件路径。它们将被解释为相对于一个 Node 模块，此处为 src。

如果您想引用本地文件，可能需要通过 tsconfig.json 首先定义路径别名：

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

（如果您的baseUrl是'.'，那么src文件夹必须与配置文件处于同一级别。）

使用Vite时，您可能还需要让其构建系统了解路径映射，例如存在{{link1：vite-tsconfig-paths}}包，提供了一个插件来实现此功能。

如果您不想要额外的依赖项或者这种方法不起作用，您可以在vite.config.js中自己指定别名：

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

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

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

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