小桀
04.配置别名

04.配置别名

别名可以在项目中使用@符号来表示路径，而不需要各种点点点，可读性会更好。

  1. 安装必要的包（我对这个包还不是很理解）：

npm install @types/node --save-dev
  1. 修改vite.config.js配置文件，添加如下配置：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
// 新增的内容
import {resolve} from 'path'

export default defineConfig({
    plugins: [vue()],

    server: {
        host: '0.0.0.0',
        port: 8081,
        open: true,
        hmr: true
    },
    // 新增的内容
    resolve: {
        alias: [
            {
                find: '@',
                replacement: resolve(__dirname, 'src')
            }
        ]
    }
})
  1. 在tsconfig.json中添加如下代码：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": [
      "ESNext",
      "DOM"
    ],
    "skipLibCheck": true,
    // 新增的内容
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}
  1. 将项目中使用相对路径的地方，替换成使用@符号，验证配置是否成功。