使用vite为vue项目配置@别名

在vue项目中，经常需要import自定义的模块，格式一般这样：

import request from '../utils/request'

如果目录层次比较深时，书写起来比较麻烦还容易出错。vite允许我们为项目src目录配置一个别名，方便调用，比如要导入一个路径为/src/view/user/info.ts的文件：

//假如已配置src目录的别名为@，则：
import info from '@/view/user/info'
//也可以为/src/view目录配置别名，比如@view,则：
import info from '@view/user/info'

怎么配置别名？

1、在项目根目录中找到vite.config.ts（TS项目）或vite.config.js（JS项目）文件。

打开对应文件后，添加以下代码：

//文件名称：vite.config.ts

//首先导入模块文件：
import {resolve} from 'path'

//然后在defineConfig中添加别名配置：
export default defineConfig({
  plugins: [vue()],
  //……其他代码等
  resolve: {
    extensions: ['.ts','.vue','.json','.js'],
    alias: {
        '@': resolve(__dirname, 'src'), //为src目录配置别名为@
        '@view': resolve(__dirname, 'src/view'), //示例，为src/view目录配置别名为@view
    }
  },

})

增加@和@view后就可以使用这两个别名引用对应的路径了。

当然，如果是TS项目，你可能会发现导入的path模块处提示有错误或“无法找到模块"path"的声明文件”等提示，不用急，只是因为node模块在ts中默认不支持类型声明，安装相关的依赖就可以了：

npm install @types/node --save-dev

2、为TS项目tsconfig.json添加配置

如果你是TS项目，安装相关的依赖后可能还是会发现在页面中使用别名导入时存在一些问题。比如路径名不被识别，输入路径@后不会智能显示路径信息等。

仔细看看项目目录下，是不是有tsconfig.node.json和tsconfig.app.json两个配置文件？如果有就对了（什么，没有？没有就自己编两个嘛，不保证有用，哈哈），打开它们，分别加入以下代码：

//tsconfig.node.json
{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2023",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,
      /* 插入以下代码 */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
       /* 其他不变 */
      ……

//tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     /* 插入以下几行代码 */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

使用示例：