在build/webpack.base.conf.js中找到resolve

直接上代码：

resolve: {
    // resolve是webpack的内置选项，顾名思义，决定要做的事情，也就是说当使用 import "jquery"，
    // 该如何去执行这件事情就是resolve配置项要做的，
    // import jQuery from "./additional/dist/js/jquery"
    // 这样会很麻烦，可以起个别名简化操作
    extensions: ['.js', '.vue', '.json'],
    alias: {
      //后面的$符号指精确匹配，
      // 也就是说只能使用 import vuejs from "vue"
      // 这样的方式导入vue.esm.js文件，不能在后面跟上 vue/vue.js
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
        'src': path.resolve(__dirname, '../src'),
        'pages': path.resolve(__dirname, '../src/pages'),
        'common': path.resolve(__dirname, '../src/common'),
        'vendor': path.resolve(__dirname, '../src/vendor'),
        'components': path.resolve(__dirname, '../src/components'),
    }

这样就可以使用import xxxComponent from 'components/xxxComponent'

但是注意，在引入imgde src路劲的时候不可以这样引入，原因据说如下：

• 因为@是webpack中定义的别名，在JS中可以使用此别名，代替resolve('src')指向的路径

• import xxxxxx是JS语法，所以可以使用@别名

• 而<img src="@/assets/head.png" alt="">标签中，src作为一个属性值，其值是字符串并非是JS，所以不能用@

• 不过据上面的Issue所说，url地址前加~标记可以让解析器将地址中的别名解析出来

• Issue中提出的方案是：<img src="~@/assets/head.png" alt="">

<img src="~@/assets/banner.jpg"/>

此方法实验过~~可行