VUE----设置路径别名

我测试使用的是脚手架2
在项目中有时我们使用相对路径引入文件时由于路径太长会很不方便，这个时候我们可以设置路径别名

1.项目根目录下创建vue.config.js文件：

2.下载扩展包：

npm install path --save
常用函数：
         1、path.dirname()  :获取目录
         2、path.basename() ：获取文件名.扩展名(我们统称为全名)
         3、path.extname()  : 获取扩展名
         4、path.parse()    : 将一个路径转换成一个js对象
         5、path.format()   ：将一个js对象转换成路径
         6、join()          : 拼接多个路径成一个路径
         7、path.resolve() :将相对路径转为绝对路径
常用变量：
         1.__dirname: 总是返回被执行的 js 所在文件夹的绝对路径
         2.__filename: 总是返回被执行的 js 的绝对路径

3.编辑vue.config.js文件：

1.引入path：
    const path = require('path');
2.封装方法：
    function resolve(dir){
        return path.resolve(__dirname,dir)
    }
3.配置文件：
module.exports = {
  configureWebpack:{
    resolve: {
          alias: {
            'src': resolve('src'),
              'assets': resolve('src/assets'),
              'images': resolve('src/assets/images')
          }
        }
  }
}

4.重新编译：

注意：修改vue.config.js必须重新编译项目，否则配置不生效

npm run serve

5.组件中引用：

在组件中使用~加路径别名的方法引用

示例代码：
  <template>
    <div id="app">
      <img src="~images/index.png">
    </div>
  </template>

6.至此，路径别名的基本设置就完成了