002、Vue3 + Vite + TypeScript + Element-Plus，第一个后台管理项目走向第2步：整合一些配置

一、配置 alias 别名

先安装依赖，否则报错

pnpm install -D @types/node

vite.config.ts 增加 resolve 配置：

import { resolve } from "path";

import { UserConfig, ConfigEnv, loadEnv, defineConfig } from "vite";

export default ({ mode }: ConfigEnv): UserConfig => {

  const env = loadEnv(mode, process.cwd());

  return {

    resolve: {

      alias: {

        '@': resolve(__dirname, 'src'),

      },

    }

  }  

}

tsconfig.json 新增配置：
"compilerOptions": {
    ...
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": { // 路径映射，相对于baseUrl
        "@/*": ["src/*"] 
    }
}
 

路径别名使用 

// src/App.vue
import HelloWorld from './components/HelloWorld.vue'
                        ↓
import HelloWorld from '@/components/HelloWorld.vue'
 

 二、安装自动导入

为了避免在多个页面重复引入 API 或 组件，由此而产生的自动导入插件来节省重复代码和提高开发效率。Element Plus 官