代码分析 —— 在vue2.x里设置alias别名

1.有关在vue项目中设置别名

在用vue-cli搭建的vue项目中常常会引用各个地方的文件，而在webpack.base.conf.js这个文件里能够为一些经常使用的目录设置一个简短且易懂的别名。

2.如何设置别名

在webpack.base.conf.js文件中能够找到这样一段代码：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
},

• extensions表明的是带这种后缀的文件能够自动解析，引入的时候不用写后缀：

import HelloWorld form '../components/HelloWorld'

这里省略了.vue后缀。

• alias则表明别名，使用别名能够在引入模块时变得更简单。

例如这里用@表明src目录，在引入组件的时候则能够这么写：

import HelloWorld form '@/components/HelloWorld'

这样依然不是特别方便，由于components目录是咱们常常会引用组件的目录，在alias里再加一行：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '@components': resolve('src/components')
    }
},

就能够这样引入组件了：

import HelloWorld form '@components/HelloWorld'

[ 好像只去掉了一个/ ] ((ｰ̀дｰ́)不要在乎这些细节)

3.设置别名的原理分析

首先看到这段代码里的resolve方法，在同一个文件里能够找到这样一段代码：

const path = require('path')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

path是node里面的一个模块，主要做用是对路径进行处理。

path.join() 方法会把给定的path片断连在一块儿。具体用法请查看node文档_path.join。

__dirname表示的是文件所在的当前目录。

resolve函数的含义就是把文件指向到和build文件夹同级的文件夹下。

再看咱们刚刚那段代码：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '@components': resolve('src/components')
    }
},

resolve('src')就指向了src目录。要配置其余别名也能够依葫芦画瓢了~