vue文件路径的引用问题---起别名

我们在写代码时有时会遇到以下文件路径

<img src="../../assets/img/tabbar/home.png" />

前面的../有好几个，看起来很乱，而且容易出错。
解决此问题的方法：为文件起别名

vue-cli2

1. 首先进入build文件夹中的webpack.base.conf.js文件，找到alias

resolve: {
    extensions: ['.js', '.vue', '.json'],
    // 别名，可以直接找到该文件，不用一层一层寻找
    alias: {
      '@': resolve('src'),
    }
  }

2. 参照src文件的配置，在alias中配置自己想要配置的文件

resolve: {
    extensions: ['.js', '.vue', '.json'],
    // 别名，可以直接找到该文件，不用一层一层寻找
    alias: {
      '@': resolve('src'),
      'assets': resolve('src/assets'),
      'components': resolve('src/components'),
      'views': resolve('src/views')
    }
  }

3. 如果文件是通过import引入，可以直接使用别名

import TabBar from "components/tabbar/TabBar";

4. 如果文件不是通过import引入，需要在别名前面加一个~符号来使用，否则会找不到文件

<img src="~assets/img/tabbar/home.png" />

vue-cli3

1. 在项目中创建vue.config.js文件
2. 在vue.config.js文件中的配置会自动和其他配置进行合并
3. vue-cli3中默认配置'@':'src',所以在src目录下的文件配置时，可以使用@/文件名，在vue-cli2中不可以使用

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