Vue快捷引用目录

Vue 中，有时候需要经常引用到某个文件，每次输入一长串的目录地址，不是很方便。这时我们可以给目录取一个别名，快捷引用目录。

首先找到 build 目录下面的 webpack.base.conf.js 文件。

在文件中找到

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
},

在 alias 中新增一个别名，例如：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/styles')
    }
}

然后就可以这样去引用它，比如原来我们需要引入的地址是这样的：

<!--old-->
import '../../../styles/reset.css'

现在我们只需要这样做：

<!--new-->
import 'styles/reset.css'

需要注意的一点是，如果是在 css样式中引入别的样式表，需要在前面加上一个 ~ 符号，例如：

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
</style>