vue-Cli3工具中,配置路径别名
最近用Vue Cli3脚手架搭建了Vue项目,发现没有build目录了,里面的webpack相关的也没了,看了官方文档后,查了资料后,发现都在vue.config.js里来配置了
配置路径别名,方便引用,不用写那么长
配置前:
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第一个参数:设置的别名,第二个参数:设置的路径
} }
' |