如何在 Svelte 中使用 Vite 和 ESlint 解析绝对路径？答案

【问题标题】：How to resolve absolute path using Vite and ESlint in Svelte?如何在 Svelte 中使用 Vite 和 ESlint 解析绝对路径？
【发布时间】：2022-01-10 05:34:02
【问题描述】：

我有一个导入 import icon from 'src/assets/icon.png'，我无法解决。

我在 jsconfig.json 和

中有"baseUrl": "."

"settings": {
    "import/resolver": {
      "node": {
        "paths": ["."]
      }
    }
  }

在 .eslintrc 中，但问题是，如果我以这种方式使用绝对导入，我会从 Vite 收到错误 - [plugin:vite:import-analysis] Failed to resolve import "src/assets/icon.png" from "src\lib\Logo.svelte". Does the file exist?

同时，如果我在导入时在src 之前添加一个正斜杠，就像import icon from '/src/assets/icon.png' 一样，它会正常工作，不会出现来自 vite 的错误，但eslint/no-unresolved-imports 规则会给我一个 linting 错误。

我检查了 vite 文档，但他们提供的唯一方法是为路径使用别名，我不愿意这样做。另一种解决方法可能是禁用 eslint 规则，这对我来说也不是一个选项。

问题：有没有办法使用“import/resolver”或 vite 的设置来解析这条路径'src/assets/icon.png'？

【问题讨论】：

标签： import path svelte vite eslintrc

【解决方案1】：

我发现此页面有助于让我的设置适用于使用 Vite + React 进行绝对/别名导入，但也许它对你也有帮助。

https://dev.to/abdeldjalilhachimi/how-to-avoid-long-path-import-using-react-with-ts-and-vite-4e2h

您不必为每个文件夹定义别名 - 而是使用读取目录名称的动态别名。

将此添加到您的 vite.config.ts 以设置动态别名：

import * as path from 'path';

//...

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

然后在您的tsconfig.json 中，您可以像这样定义别名：

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

baseUrl 本身几乎工作得很好，但这个解决方案似乎更健壮，让我可以做你所说的那种资产和模块导入。 p>

import logoPNG from '~/assets/logo.png';

【讨论】：