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

最新推荐文章于 2025-02-25 22:16:43 发布

原创最新推荐文章于 2025-02-25 22:16:43 发布 · 986 阅读

2 ·

CC 4.0 BY-SA版权

JavaScrept 同时被 2 个专栏收录

13 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文介绍了在vue-cli3项目中配置Webpack别名的方法，以简化组件和路径引用。通过创建并编辑相关配置文件，设置别名可以避免因文件移动而频繁修改路径，提高开发效率。

最近在使用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';