Vue + Webpack 學習隨手筆記 - 給路徑起別名

在剛開始入門學習Vue+Webpack配置router時，就對 @ 能夠指代 src 感到很好奇，今天終於搞明白，實際上是Webpack模板下的一個JS文件給src起的別名。在build/webpack.base.conf.js這個文件下有這麼一串代碼：

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

能夠看到，alias（別名）這個對象下定義了@的別名是resolve('src')返回的值。這個函數的定義是這樣的：

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

這樣子就很明白了。
咱們甚至能夠效仿它「起別名」的方式，自定義一些經常使用的路徑，好比配置成這樣：

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

這樣咱們在配置路由或者是其餘JS代碼須要用到import時，均可以用到這些自定義的路徑別名，方便本身操做。