How to configure aliases for typescript + vite projects

In order to omit the long path , I often like to configure path aliases . But in typescript There will be some pits , For example, the import path cannot be in the form of “.ts” End of extension , Path not recognized, etc . Below I record my handling method .

vite.config.js：

export default defineConfig({
    
  resolve: {
    
    alias: {
    
      '@': path.resolve(__dirname, 'src') //  Configure aliases 
    }
  }
})

After configuration , You can go to ide The alias is used in . But this time I found , An error is reported under the path ,hover The error prompted after going up is ： The import path cannot be in “.ts” End of extension .

Since extensions are not allowed , Then I'll omit the extension .

export default defineConfig({
    
  resolve: {
    
    alias: {
    
      '@': path.resolve(__dirname, 'src')
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
  }
})

such , The extension does not need to be written .

however , The project cannot run , Error indication ： Can't find this file .

There is a problem with the compilation , So I adjusted tsconfig.json, Add the following configuration ：

{
    
  "compilerOptions": {
    
    "baseUrl": ".",
    "paths": {
    
      "@/*": ["src/*"] //  Relative position requires configuration baseUrl To recognize , Otherwise, an error will be reported 
    }
  }
}