目录

vue3 使用 @ 路径别名

使用 @ 路径别名

在使用 import 的时候, 可以使用相对路径 ../components/HelloWorld.vue 指定文件位置, 但这依赖文件本身的位置,在 跨目录 的时候, 并不方便。

例如, 路由文件 要使用 Components 组件

// file: /src/router/index.ts
// 路由目标组件
import HelloWorld from '../components/HelloWorld.vue'
import World from '../components/World.vue'

要使用路径别名, 需要进行一些额外配置

安装 @types/node 支持

安装 @types/node 组件

yarn add @types/node

tsconfig.json 中, compilerOptions 下配置

{
  	// ... ,
    "compilerOptions": {
      // ....
        "types": [
            "node"
        ]
    }
}

vite.cofnig.ts 配置

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

// 需要引入 path 模块
// yarn add @types/node
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  	// resolv 对象中配置
    resolve: {
      	// 别名配置
        alias: {
          	// @ => src
            "@": path.resolve(__dirname, "src"),
          	// @comps => "src/components"
            "@comps": path.resolve(__dirname, "src/components"),
            "@router": path.resolve(__dirname, "src/router"),
            "@utils": path.resolve(__dirname, "src/utils")
        }
    },
    plugins: [
        vue()
    ]
})

使用路径别名之后, 就可以使用 简短绝对路径 , 不仅指向 更清晰 ,而且还不在依赖当前文件的位置。

// file: /src/router/index.ts
// 路由目标组件
import HelloWorld from '@/components/HelloWorld.vue'
import World from '@/comps/World.vue'