The title is rewritten as follows: Importing an index.ts file with no file extension in Vue 3 and Vite produces an error link when an index.vue file is encountered in the same folder.

Question

How to import an index.ts file using vue 3 and vite without specifying the file extension when there is another index.vue file in the same folder?

I'm trying to import the component:

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

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

But Webstorm references the index.vue file by default.

So, how to make Webstorm import the index.ts file by default?

P.S. By the way, everything works fine when I build the app, it seems to be a linking issue with Webstorm.

这是vite.config.ts的内容

import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [vue(), tsconfigPaths()],
  server: {
    host: true,
    port: 5000,
  },
  preview: {
    port: 8000
  },
  resolve: {
    alias:
      {
        '@': path.resolve(__dirname, "./src"),
      },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
        @import "@/app/styles/vars.scss";
        @import "@/app/styles/mixins.scss";
        `
      }
    }
  },
})

这是tsconfig.json的内容

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Answer 1

Due to the existence of Vite, you can import files without specifying an extension. However, as you mentioned, if two files have the same name under the same folder, you may encounter confusion when importing either file. A good idea is to use different names for the files and import them with corresponding names.

However, if there are any specific requirements that require using the same Vue and TS file names, then one approach is to use Vite's path alias feature . What you need to do is-

Define path aliases for these files in your vite.config.ts file -

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

In your tsconfig.json, modify the compilerOptions section to include the path mapping for the alias -

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

Now you can easily import these files like this -

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