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