如何给Quasar设置@别名

众所周知，Vue-cli创建项目都会帮我们设置@别名，但是基于Vue的Quasar不会……不过，要设置其实也不难，就是网上没有现成的教程，需要结合Quasar和Webpack的文档（或者参考Vue设置的步骤）来弄。

配置都在quasar.conf.js中进行。首先让我们看一下处理Webpack配置的部分（中文版：http://www.quasarchs.com/quasar-cli/cli-documentation/handling-webpack）。我们要使用的配置是chainWebpack，在build里面，在extendWebpack后面添加即可。然后参考Vue的配置：https://blog.csdn.net/panchang199266/article/details/90145638，可知应该添加以下代码：

chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      // 需要重启 IDE
}

其中，resolve是自己编写的，内容如下：

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

同时，还要引入path模块：

const path = require('path')

这样，重启IDE后，就可以在源码中使用@来代替/src了。同理，也可以设置其他路径的别名，这里就不过多阐述。

如有不懂的地方，欢迎在评论区中提出。