La ruta @alias de configuración del proyecto, y permita que el editor identifique y solicite correctamente.

prefacio

La configuración de una ruta de alias en un proyecto es una operación común al escribir un proyecto. Los beneficios son:

1. Simplifique las rutas de los módulos. En un proyecto, algunos archivos pueden existir en directorios profundos y deben ser referenciados varias veces. Si usa rutas relativas para referencias cada vez, será muy problemático. Al configurar la ruta @alias  en el proyecto, la ruta de estos directorios profundos se puede simplificar en un alias, que es más claro y conciso en el código.

2. Mejorar la eficiencia de la refactorización. A menudo es necesario refactorizar archivos en proyectos, como mover un componente de un directorio a otro. Si la ruta del alias no se usa como referencia, es necesario modificar la ruta en todos los lugares donde se hace referencia al componente, lo que requiere mucho tiempo y es muy laborioso. Si usa una ruta de alias, solo necesita modificarla en la configuración de la ruta de alias.

3. Facil mantenimiento. En un proyecto a gran escala, habrá muchos componentes, herramientas y otros recursos compartidos, y estos recursos a menudo necesitan estar referenciados en diferentes lugares. Si no se utilizan rutas de alias, pueden ocurrir problemas como referencias faltantes o definiciones duplicadas. El uso de rutas de alias puede evitar estos problemas, administrar recursos compartidos en el proyecto de manera unificada y ser fácil de identificar y mantener en el código.

configuración

• Rápido

import { defineConfig } from 'vite'
import path from 'path'

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

• paquete web

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Reconocimiento del editor

jsconfig.jsonEl editor no reconoce automáticamente el alias, también debe agregar un archivo (o ) al proyecto tsconfig.jsony configurar el alias en él.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}