vue-cli3构建的项目中配置别名

最近在使用vue-cli3构建一套有关Vue的前端解决化方案时，对于引入组件或相关路径的操作必须找出它的相关路径很是不方便，想在webpack配置文件中为项目配置别名。查询文档发现vue-cli3隐藏了webpack.config.js文件，要想对webpack进行配置需要在项目下创建vue.config.js文件，之后在其中进行配置。具体文档

配置别名之后，文件引入方便，不用再关心文件层级关系，之后就算将组件移到别的文件也不用改变路径

具体步骤：

• 在项目下创建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第一个参数：设置的别名，第二个参数：设置的路径    
		}
	}

• 之后引入组件

//未配置之前
import Home from '../components/Home.vue';
//配置别名之后
import Home from 'components/Home.vue';
//或者
import Home from '@/components/Home.vue';