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" }] }
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 lafonctionnalité 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中，修改compilerOptionsavec un chemin contenant l'alias -{ "compilerOptions": { ..., "paths": { ..., "@indexTs": ["index.ts文件的路径"], "@indexVue": ["index.vue文件的路径"] } } }Vous pouvez désormais facilement importer ces fichiers comme celui-ci -