Vue3+Vite环境下配置Webstorm默认导入index.ts而非index.vue

问题场景 #

在Vue3与Vite项目中，当同一目录下同时存在index.ts和index.vue文件时，使用import { Component } from '@/app/some_component'这类省略扩展名的导入语句时，Webstorm会默认关联index.vue文件，但项目构建运行完全正常。需要调整配置让Webstorm默认导入index.ts文件。

项目目录结构 #

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

当前配置文件 #

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" }]
}

解决方法 #

方法1：修改tsconfig.json指定解析优先级 #

在tsconfig.json的compilerOptions中添加resolveExtensions配置，将.ts放在扩展名列表的最前面，让TypeScript和Webstorm优先解析.ts文件：

{
  "compilerOptions": {
    // 保留原有配置...
    "resolveExtensions": [".ts", ".vue", ".js", ".jsx", ".tsx"]
  },
  // 保留原有配置...
}

方法2：调整Webstorm文件类型优先级 #

1. 打开Webstorm设置（快捷键：Windows/Linux为Ctrl+Alt+S，Mac为Cmd+,）
2. 进入Editor > File Types
3. 在左侧列表找到TypeScript，点击右侧+按钮，添加index.ts到Registered Patterns，并将其移至列表最上方
4. 找到Vue.js，确认*.vue的优先级低于index.ts
5. 保存设置后重启Webstorm，导入时会优先关联index.ts

方法3：关联Webstorm与Vite配置 #

确保Webstorm遵循Vite的解析规则：

1. 打开设置，进入Languages & Frameworks > JavaScript > Webpack
2. 选择Manually set up Webpack configuration file，然后选择项目根目录下的vite.config.ts
3. 保存设置，Webstorm会按照Vite的解析逻辑处理导入

内容的提问来源于stack exchange，提问作者Digital Extent