vue 用別名取代路徑引用

在項目開發過程中有可能很多包是沒有放在npm上的，許多包需要下載到本地引用，這樣一來我們只能通過require的方式來引用文件，但是路徑的名字就會很長

例如

import Select from '../../bower_commonents/bootstrap-select/dist/js/select'

這種引用方式違背了CommonJS的編程規范，這些長路徑我們可以通過webpack的resolve 配置項來解決。

在weboack.base.config.js中加入以下別名的定義：

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'bs-select': 'bower_components/bootstrap-select/dist/js/selsect.js'
    }
  }
}

 有了上面的這個定義之后，我們就可以把之前的引用改為

import Select from 'bs-select'