vue-Cli3工具中，配置路径别名

kirin

发布于 2021-02-25 10:07:19

4950

发布于 2021-02-25 10:07:19

文章被收录于专栏：Kirin博客

最近用Vue Cli3脚手架搭建了Vue项目，发现没有build目录了，里面的webpack相关的也没了，看了官方文档后，查了资料后，发现都在vue.config.js里来配置了

配置路径别名，方便引用，不用写那么长

配置前:

1	import Banner from '../components/m-banner.vue';

配置后(不用再关心文件层级关系):

1	import Banner from 'components/m-banner.vue';

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/02/17 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript