Der Titel wird wie folgt umgeschrieben: Beim Importieren einer index.ts-Datei ohne Dateierweiterung in Vue 3 und Vite wird ein Fehlerlink erzeugt, wenn eine index.vue-Datei im selben Ordner gefunden wird.

Question

Wie importiere ich eine index.ts-Datei mit Vue 3 und Vite, ohne die Dateierweiterung anzugeben, wenn sich im selben Ordner eine andere index.vue-Datei befindet?

Ich versuche die Komponente zu importieren:

import { Component } from '@/app/some_component'

src
|
└───
    App
    │
    └───some_component
         │ index.ts
         │ index.vue
         │ ...

Aber Webstorm verweist standardmäßig auf die Datei index.vue.

Wie kann Webstorm die Datei index.ts standardmäßig importieren?

P.S. Übrigens funktioniert alles einwandfrei, wenn ich die App erstelle, es scheint ein Verknüpfungsproblem mit Webstorm zu sein.

这是vite.config.ts的内容

import { defineConfig } from 'vite'
Pfad aus „Pfad“ importieren
vue aus „@vitejs/plugin-vue“ importieren
tsconfigPaths aus „vite-tsconfig-paths“ importieren

Standard exportieren defineConfig({
  Plugins: [vue(), tsconfigPaths()],
  Server: {
    Gastgeber: wahr,
    Hafen: 5000,
  },
  Vorschau: {
    Port: 8000
  },
  lösen: {
    alias:
      {
        '@': path.resolve(__dirname, "./src"),
      },
  },
  CSS: {
    Präprozessoroptionen: {
      scss: {
        zusätzlicheDaten: `
        @import "@/app/styles/vars.scss";
        @import "@/app/styles/mixins.scss";
        `
      }
    }
  },
})

这是tsconfig.json的内容

{
  „compilerOptions“: {
    „Ziel“: „ES2020“,
    „useDefineForClassFields“: true,
    „module“: „ESNext“,
    „lib“: [„ES2020“, „DOM“, „DOM.Iterable“],
    „skipLibCheck“: wahr,

    /* Bundler-Modus */
    „moduleResolution“: „bundler“,
    „allowImportingTsExtensions“: true,
    „resolveJsonModule“: true,
    „isolatedModules“: true,
    „noEmit“: wahr,
    „jsx“: „bewahren“,

    /* Fusseln */
    „streng“: wahr,
    „noUnusedLocals“: wahr,
    „noUnusedParameters“: wahr,
    „noFallthroughCasesInSwitch“: wahr,
    "Pfade": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
  „references“: [{ „path“: „./tsconfig.node.json“ }]
}

Answer 1

由于Vite的存在，您可以在导入文件时无需指定扩展名。但是，正如您提到的，如果两个文件在同一个文件夹下具有相同的名称，那么在导入任何一个文件时可能会遇到混淆的问题。 一个好的办法是为文件使用不同的名称，并使用相应的名称导入它们。

然而，如果有任何特定的要求需要使用相同的Vue和TS文件名称，那么一种方法是使用Vite的路径别名功能。您需要做的是-

在您的vite.config.ts文件中为这些文件定义路径别名-

resolve: {
  alias: {
    'IndexTs': 'index.ts文件的路径',
    'IndexVue': 'index.vue文件的路径
  }
},

在您的tsconfig.json中，修改compilerOptions部分以包含别名的路径映射-

{
  "compilerOptions": {
    ...,
    "paths": {
      ...,
      "@indexTs": ["index.ts文件的路径"],
      "@indexVue": ["index.vue文件的路径"]
    }
  }
}

现在，您可以像这样轻松导入这些文件-

import something from '@indexTs';
import IndexVueComponent from '@IndexVue'