Vue-cli4 配置文件路径别名以及使用详解

在开发vue项目中，我们经常需要引入不同的文件，这时就需要针对文件的路径进行设置，仅仅使用./ .//来进行文件的导入，维护和更改都变的相当麻烦，需要对文件的路径相当熟悉才可以

所以可以设置alias别名来方便操作，然后脚手架cli4中并没有和cli2一样自动生成一个webpack.base.config.js文件来让我们直接写别名。所以需要我们自行创建，步骤如下：

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

与package.json 同级目录

2. 配置文件中写入一下代码：

// 用来配置文件的别名，方便路径的寻找
const path = require('path');//引入path模块
function resolve(dir){
    return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}

module.exports={
    chainWebpack:(config)=>{
        config.resolve.alias
        //set第一个参数：设置的别名，第二个参数：设置的路径
            .set('@',resolve('./src'))//根据目录的层级来决定，也可以自行设
            .set('components',resolve('./src/components'))
            .set('views',resolve('./src/views'))
            .set('assets',resolve('./src/assets'))
    }
}

3. 别名的使用

1：HTML-Dom中使用：需要在前面加上  ~ 
2：css中可以直接使用 
3：router路由配置中：直接使用

4 比较全面的配置博客：

https://maomin.blog.csdn.net/article/details/103252533?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control