vite中如何使用@ 配置路径别名

在vite项目中，使用路径别名可以帮助我们更简洁地编写引入模块的代码，提升代码的可读性和开发效率。使用@配置路径别名是vite官方推荐的方式之一。下面，我会详细讲解如何在vite中使用@配置路径别名，同时提供两个示例说明。

基本配置步骤

1. 在项目根目录下的vite.config.js文件中添加resolve.alias配置项。

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

以上代码中，我们将@路径设置为指向/src目录的别名。注意，alias属性中的键名可以替换成你想要的任何路径别名，例如：'~': '/src'。

1. 在项目中使用路径别名。

import HelloWorld from '@/components/HelloWorld.vue'

以上代码中，我们使用了路径别名@来代替了项目根目录的/src路径。

示例说明

示例1：使用路径别名引入vue组件

在项目根目录下的/src/components/HelloWorld.vue中，我们定义了一个名为HelloWorld的vue组件。

<!-- /src/components/HelloWorld.vue -->
<template>
  <h1>Hello World!</h1>
</template>

现在，我们可以在/src/App.vue文件中引入这个组件，引入时使用@路径别名。

<!-- /src/App.vue -->
<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

通过这种方式，我们就可以简单地引用了组件，同时避免了复杂的相对路径。

示例2：使用路径别名引入自定义模块

在项目根目录下的/src/utils目录中，我们定义了一个名为math.js的自定义模块。该模块暴露了一个名为add的函数，用于将两个数相加并返回结果。我们可以在项目中的其他地方使用此函数来执行加法运算。

// /src/utils/math.js
export function add(x, y) {
  return x + y
}

现在，我们可以在项目的其他文件中引入这个自定义模块，引入时使用路径别名@。

import { add } from '@/utils/math.js'

console.log(add(1, 2)) // 输出 3

通过这种方式，我们就可以更轻松地在项目中使用自定义模块了。