Vue 自定义路径别名

在 Vue 项目中，我们通常需要引入很多文件，并且很多文件都有重复的路径前缀。我们可以通过自定义别名来简化路径，具体方法如下：

打开根目录下的 build/webpack.base.conf.js 文件，修改如下内容：

...
module.exports = {
	...
	resolve: {
	  extensions: ['.js', '.vue', '.json'],
	  // 别名会被映射为相应的路径
	  alias: {
	    'vue$': 'vue/dist/vue.esm.js',
	    '@': resolve('src'),
	    // 自定义别名
	    'styles': resolve('src/assets/styles'),
	  }
	}
	...
}
...

使用代码如下：

相当于：@import '~@/assets/styles/varibles.styl'
注意：使用 stylus 语法时，别名前面一定要加 ‘~’