Vue-Cli3/4 路径别名配置和使用

在开发vue的项目中，我们肯定需要对路径进行配置，因为在各个文件中，导入文件什么的，使用./、和 ../这种格式的相对路径，就比较的烦，要对路径的结构相当的熟悉，而且难以维护。所以我们就要去设置别名（alias）

配置

1) 创建vue.config.js文件

在原始目录下创建vue.config.js文件，即此文件与package.json文件同级

2) 在vue.config.js中编写配置代码

const path = require('path')// 引入path模块
function resolve (dir) {
  return path.join(__dirname, dir)// path.join(__dirname)设置绝对路径
}
module.exports = {
  chainWebpack: (config) => {
    // 给路径起别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('views', resolve('src/views'))
  },
};

set：第一个参数：设置的别名，第二个参数： 对应的路径

3)修改配置文件后，需要重新编译

npm run serve

 使用

1) 在html，css代码中 ：要在路径前添加波浪线’~’ 否则会报错

background: url("~assets/images/banner01.png") center no-repeat;

2) 在js代码中：不用添加波浪线 直接使用

import Index from '@/pages/home/index.vue'

---

记录自己的成长，也希望能帮助到大家少走弯路，期待你的点赞支持💫！