vue脚手架配置路径别名

vue-cli 2.x配置方式

在vue-cli 2.x项目中，进入build文件夹，找到webpack.base.conf.js，编辑文件 ，并找到resolve字段的配置项（webpack.config.js 是基于webpack（开源的前端打包工具）的配置文件。）

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),   //src解析成@
      'assets': resolve('src/assets'),  // src/assets解析成assets
    }
  },

默认是有配置src的，下边的比如assets别名注意路径不能写@而是得写src，这里跟3版本还是有点区别的。

vue-cli 3.x 配置方式

vue-cli 3.x中配置文件被隐藏到node_modules/@vue/cli-service/lib/config/base.js里面了。虽然我们知道了文件被藏到什么地方，但一般我们不修改node_modules中的文件。

所以我们可以在项目的根目录下创建一个vue.config.js文件，用来配置路径别名，它会被 @vue/cli-service 自动加载，前提是该文件一定要存在于项目的根目录下

需要注意的是，vue-cli 3.x已经默认帮我们配置了src别名为@，所以这里我们不需要再配置src。

使用别名的时候

注意， 如果导入样式或者html图片路径 前面要加~

<img src="~assets/img/tabbar/home.svg" alt="" slot="item-icon">

如果是组件

 import TabAside from 'components/tabbar/gameaside/TabAside.vue'