vue.config.js配置路径别名

**Vue CLI3.x 中的路径别名配置**

在 Vue CLI3.x 中，我们可以通过 `vue.config.js` 文件来配置路径别名。这种配置方式可以帮助我们更好地管理项目中的静态资源，减少文件路径的冗余性。

### 一、什么是路径别名？

路径别名（alias）是一种简化 URL 的方法，它允许我们使用一个短暂且易于记忆的名称来代替一个长难以记忆的 URL。例如，我们可以将 `src/assets/images` 这个路径设置为一个别名，之后在项目中就可以直接使用这个别名来引用这些图片资源。

### 二、配置路径别名要配置路径别名，我们需要在 `vue.config.js` 文件中添加以下代码：

javascriptmodule.exports = {
 // ...其他配置项...
 chainWebpack: (config) => {
 config.resolve.alias .set('@', resolve('src')) // 设置 src 目录为 @ 别名 .set('assets', resolve('src/assets')) // 设置 assets 目录为 assets 别名 .set('components', resolve('src/components')) // 设置 components 目录为 components 别名 },
}

在上述代码中，我们使用 `config.resolve.alias` 来设置路径别名。我们分别设置了三个别名：

* `@`:指向 `src` 目录* `assets`:指向 `src/assets` 目录* `components`:指向 `src/components` 目录### 三、如何使用路径别名？

在项目中，我们可以通过以下方式来使用这些路径别名：

####1. 在组件中使用路径别名例如，在一个组件中，我们可以使用 `@/assets/images/logo.png` 来引用 `src/assets/images/logo.png` 这个图片资源。

javascript<template>
 <img src="@/assets/images/logo.png" alt="Logo">
</template>

<script>
export default {
 // ...
}
</script>

####2. 在 CSS 中使用路径别名例如，在一个 CSS 文件中，我们可以使用 `@/assets/styles/style.css` 来引用 `src/assets/styles/style.css` 这个样式文件。

css/* src/components/HelloWorld.vue */
<style scoped>
 @import '@/assets/styles/style.css';
</style>

####3. 在 JavaScript 中使用路径别名例如，在一个 JavaScript 文件中，我们可以使用 `require('@/assets/scripts/script.js')` 来引用 `src/assets/scripts/script.js` 这个脚本文件。

javascript// src/components/HelloWorld.vue<script>
import script from '@/assets/scripts/script.js';
export default {
 // ...
}
</script>

### 四、总结通过配置路径别名，我们可以更好地管理项目中的静态资源，减少文件路径的冗余性。这种配置方式可以帮助我们提高开发效率和代码可读性。

在本文中，我们学习了如何使用 Vue CLI3.x 中的 `vue.config.js` 文件来配置路径别名，并演示了如何在组件、CSS 和 JavaScript 中使用这些路径别名。