撰于 阅读 29

Vite 配置路径别名：更方便的引用文件

1. 什么是 alias？

alias 是一个用于定义路径别名的配置选项。当你的项目结构变得复杂时，路径别名可以帮助你简化 import 或 require 语句中的路径，让代码更干净、更可维护。

2. 为什么需要 Alias？

我们在 /router/index.js 文件中引入了 index.vue 组件，格式是下面这样的：

import Index from '../pages/frontend/index.vue'

通过 .. 来指定上一级目录，然后再定位具体路径下。考虑一个大型项目中，我们经常需要这样的引用，当文件层级很深，那么代码可能会像下面这样：

import Button from '../../../components/Button.vue';

这种相对路径不易于管理和阅读。使用 alias，我们可以将路径简化为：

import Button from '@/components/Button.vue';

这样一来，不仅路径更短、更明确，而且移动文件时无需改动 import 路径。

3. 配置 Alias

3.1 修改 Vite 配置

在项目的根目录中，找到 Vite 的配置文件 vite.config.js，编辑它，添加alias 配置，代码如下：

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      // 定义一个别名 '@'，该别名对应于当前 JavaScript 模块文件所在目录下的 'src' 目录的绝对文件路径。
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

上述代码中，我们定义一个别名 @，该别名对应于当前 JavaScript 模块文件所在目录下的 src 目录的绝对文件路径。

4. 如何使用别名 Alias？

引入其他组件或者js

import Button from '@/components/Button.vue';

或者

import App from '@/App.vue';

alias 是一个非常有用的 Vite 配置选项，它可以让你的导入语句更加清晰和易于管理。在大型项目中，使用 alias 可以极大地提高代码的可维护性。

#vue#vite