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

    原文作者:Z3ROG
    原文地址: https://segmentfault.com/a/1190000016342698
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞