代碼分析 —— 在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目錄。要配置其餘別名也能夠依葫蘆畫瓢了~