1. 引言
在前面的章节，已经讲解了部分vue-element-admin的知识：
本文主要讲解的是alias别名。
2. alias
我们知道，在日常的开发中，要引入一个文件，经常要写一连串的东西，如下：
import stickTop from '../src/components/stickTop'
当项目逐渐变大之后，文件与文件直接的引用关系会很复杂，这时候就需要使用alias了。
2.1 alias使用方式
alias一般在vue.config.js里配置，使用方式如下。
① 案例一：
resolve: { alias: { '~': resolve(__dirname, 'src') } } //使用 import stickTop from '~/components/stickTop'
② 案例二：
alias: { 'src': path.resolve(__dirname, '../src'), 'components': path.resolve(__dirname, '../src/components'), 'api': path.resolve(__dirname, '../src/api'), 'utils': path.resolve(__dirname, '../src/utils'), 'store': path.resolve(__dirname, '../src/store'), 'router': path.resolve(__dirname, '../src/router') } //使用 import stickTop from 'components/stickTop' import getArticle from 'api/article'
这些使用方式没有好与坏对与错，纯看个人喜好和团队规范。
3. element项目详解
在element项目，alias是如何使用的呢？我们来看下，首先打开vue.config.js文件，预料之内，有一段代码块：
configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name: name, resolve: { alias: { '@': resolve('src') } } },
可以看到，src都使用@来替代，打开某个js文件，可以看到，是这样引用src下的文件的：
本文完！
