前端开发成长日记2--文件路径取别名

当项目中文件较多时，在引用相关文件时，会导致写文件路径时很烦，很容易出错，所以需要给文件路径取别名。

1. 在项目根目录下建一个vue.config.js文件，该文件用于一些基础配置和一些扩展配置进行配置。
2. 代码格式如下：

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

其中，@是指src目录文件路径。
使用时注意：

• 当在dom中使用路径别名时，需要在别名前加一个~，如：

<img  src="~assets/img/tabbar/cart.svg" alt="">

• 当在文件中使用路径别名时，直接使用即可。如

import TabBar from 'common/tabbar/TabBar'

这样就不用担心路径出错了~~