webpack中关于路径别名

1. 起路径别名：
   对于vue-cli2中，在webpack-config-js中

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

对于vue-cli脚手架版本大于等于3中，在vue.config.js中

  `module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'components': '@/components',
        'content': 'components/content',
        'common': 'components/common',
        'assets': '@/assets',
        'network': '@/network', 
        'views': '@/views',
      }
    }
  }
}`

3. 路径别名可以使用在import语法中，如样式文件的引入@import("@/xyz/") 或 import xx from “@/xyz/” 或组件按需加载() => import(‘views/profile/Profile’)
4. 注意在标签元素中或者在style中使用别用，如img标签中src引入时加 波浪号 使用，如
   <img slot="item-icon" src="~assets/image/yourpic.png" alt="">