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时，均可以用到这些自定义的路径别名，方便本身操做。