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

亦凉 2022-10-29 11:18 271阅读 0赞

#####  #####

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

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

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

###  ###

与package.json 同级目录

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]  
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'))
        }
    }

1.  别名的使用

####  ####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]: /images/20221024/2cb7f2bc600b4a5681e8e43c7de9c96a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]: /images/20221024/103ab5d0ee314643b533e7945778d5c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]: /images/20221024/5a8442bbda34416fba2fde6db15cec49.png