配置模块路径别名

Vite官方提供了路径别名的配置项：resolve.alias

需要注意的是：当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。

示例：

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path
import eslint from 'vite-plugin-eslint'

// https://vitejs.dev/config/

// 生成绝对路径的path
function pathResolve (path) {
    return resolve(process.cwd(), '.', path)
}

export default defineConfig({
  plugins: [
    vue(),
    eslint({
      cache: false
    })
  ],
  resolve: {
      // 配置模块路径别名
      alias: [
          { find: '@', replacement: pathResolve('src')}
      ]
  }
})

process.cwd：项目根目录（index.html 文件所在的位置）;

这里我们使用到了path模块，在模块里面使用node的核心模块的的话，需要安装node的类型补充：

npm install @types/node --save-dev

当我们在导入模块时使用别名的方式导入时，ts会报这样一个错误:找不到模块“@/api/user"或其相应的类型声明.，这是因为ts不能识别这个路径别名，所以你需要告诉ts：

tsconfig.json：

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

上面的配置表示，@/ 就代表 **src/**目录

第七章-配置模块路径别名

配置模块路径别名