vue路径别名

配置前:

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

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

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第一个参数：设置的别名，第二个参数：设置的路径

    }
}

<meta charset="utf-8">

1. 我们在做vue项目都会遇到引入文件路径问题如: import xxx from "../../../components/xxx.vue",

2. 在用vue-cli-3 创建的项目中我们可以在vue.config.js文件中这样设置: