vue3项目搭建连载文章(6)-path路径别名配置@

问题描述

一般情况下我们去引入组件。 代码的写法如下:

未配置的情况写法如下:
import router from './router'

我们期望
import router from '@/router'

这样写的好处就是当文件比较深的情况下。不需要../../这种方式进行寻址。

配置步骤

npm install @types/node --save-dev

该命令主要解决如下异常:

使用别名需要用到node的path，vite.config.ts 提示找不到对应模块 原因分析：path模块是node.js内置的功能，但是node.js本身并不支持typescript，所以直接在typescript项目里使用是不行的

• vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//以下两行代码是配置
import path from 'path'
const resolve = (dir:string) => path.resolve(__dirname, dir)


export default defineConfig({
  plugins: [vue()],
  resolve:{
    //这里是别名的映射规则
    alias:{
      '@': resolve('src'),
      '@components': resolve('src/components'),
      '@api': resolve('src/api')
    }
  }
})

ts.config.ts

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    //以下两条就是配置信息
    "baseUrl": "./",
    "paths": {
      "@": ["src"],
	    "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

使用效果， mian.ts

import router from '@/router'
import store from '@/store'
import i18n  from '@/lang'