前言

vue-cli3或者4中使用脚手架创建的项目，没有webpack.base.config.js文件，那么咋搞？

手动创建呗？ 就可以配置一些额外的操作了，如何配置别名呢，直接上手吧。

一、创建vue.config.js文件

注意：vue.config.js与src在同一个目录哦，也就是在你项目名称第一个目录下，你就可以创建这个文件夹了。

二、编写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第一个参数：设置的别名，第二个参数：设置的路径
            .set('@',resolve('./src'))
            .set('assets',resolve('.src/assets'))
            .set('components',resolve('./src/components'))
            .set('views',resolve('src/views'))
    }
}

三、页面使用

对于javascript引入：

第一种写法：

第二种写法：

对于css引入：

第一种写法：

第二种写法：

对于Vue页面其他资源引入：

第一种写法：加上 @

第二种写法：加上 ~@

对于路由中的赖加载：

第一种写法：

这第一种写法：@加上 ~@就行不通了

第二种写法：

独家总结

如果你觉得DT_小白文章写的还不错，请微信搜索并关注「 Java云社 」微信公众号，和DT_小白一起学习Java、分布式、微服务、大数据技术，并且「 Java云社 」收集了大量的大厂面试题目集，等你来挖掘，为了提升自己的能力，实现技术能力的飞跃，每天定时更新超硬核技术干货，我在「 Java云社 」等您的加入，让我们共同学习吧！