Vue项目实战（03）- alias

1. 引言

在前面的章节，已经讲解了部分vue-element-admin的知识：

• 《Vue项目实战（01）-vue-element-admin项目结构分析》
• 《Vue项目实战（02）-Vuex状态管理模式》

本文主要讲解的是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下的文件的：

本文完！