Vue项目路径别名设置

用vue-cli搭建好vue项目之后，进入正式开发过程，有时候会发现各种import路径中都存在长串的重复路径，比如：

import 'src/assets/styles/reset.css'
import 'src/assets/styles/border.css'

为了方便维护，可以打开build文件下的webpack.base.conf.js文件，在module.exports中找到resolve字段，在其中为重复路径设置一个足以表意的别名：

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

这里'styles'字段就是我设置的别名，以后在项目中引用路径含有'src/assets/styles'的文件，只需如下：

import 'styles/reset.css'
import 'styles/border.css'