用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'