Le titre est réécrit comme suit : L'importation d'un fichier index.ts sans extension de fichier dans Vue 3 et Vite produit un lien d'erreur lorsqu'un fichier index.vue est rencontré dans le même dossier.

Question

Comment importer un fichier index.ts en utilisant vue 3 et vite sans spécifier l'extension du fichier lorsqu'il y a un autre fichier index.vue dans le même dossier ?

J'essaie d'importer le composant :

importer { Component } depuis '@/app/some_component'

src
|
└───
    application
    │
    └───some_component
         │ index.ts
         │ index.vue
         │ ...
Mais Webstorm fait référence au fichier index.vue par défaut. 
Alors, comment faire pour que Webstorm importe le fichier index.ts 
P.S. Au fait, tout fonctionne bien lorsque je crée l'application, cela semble être un problème de liaison avec Webstorm.
这是vite.config.ts的内容
importer { definitionConfig } depuis 'vite'
importer le chemin depuis 'chemin'
importer la vue depuis '@vitejs/plugin-vue'
importer tsconfigPaths depuis 'vite-tsconfig-paths'

exporter la définition par défaut ({
  plugins : [vue(), tsconfigPaths()],
  serveur : {
    hôte : vrai,
    port : 5000,
  },
  Aperçu: {
    port : 8000
  },
  résoudre: {
    alias:
      {
        '@' : chemin.resolve(__dirname, "./src"),
      },
  },
  css : {
    Options du préprocesseur : {
      scss : {
        Données supplémentaires : `
        @import "@/app/styles/vars.scss";
        @import "@/app/styles/mixins.scss";
        `
      }
    }
  },
})
这是tsconfig.json的内容
{
  "Options du compilateur": {
    "cible": "ES2020",
    "useDefineForClassFields": vrai,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": vrai,

    /* Mode regroupeur */
    "moduleResolution": "groupeur",
    "allowImportingTsExtensions": vrai,
    "resolveJsonModule": vrai,
    "isolatedModules": vrai,
    "noEmit": vrai,
    "jsx": "préserver",

    /* Peluche */
    "strict" : vrai,
    "noUnusedLocals": vrai,
    "noUnusedParameters": vrai,
    "noFallthroughCasesInSwitch": vrai,
    "chemins": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
  "références": [{ "chemin": "./tsconfig.node.json" }]
}

            

Answer 1

Grâce à Vite, vous pouvez importer des fichiers sans spécifier d'extension. Cependant, comme vous l'avez mentionné, si deux fichiers portent le même nom dans le même dossier, vous risquez de rencontrer une confusion lors de l'importation de l'un ou l'autre fichier. Une bonne idée est d'utiliser des noms différents pour les fichiers et de les importer avec les noms correspondants.

Cependant, s'il existe des exigences spécifiques nécessitant l'utilisation des mêmes noms de fichiers Vue et TS, une solution consiste à utiliser la fonctionnalité d'alias de chemin de Vite. Ce que vous devez faire, c'est-

Définissez les alias de chemin pour ces fichiers dans votre vite.config.tsfichier-

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

Carte dans votre section tsconfig.json中，修改compilerOptions avec un chemin contenant l'alias -

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

Vous pouvez désormais facilement importer ces fichiers comme celui-ci -

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