vue2 使用 alias 简化路径

最新推荐文章于 2024-04-28 17:10:33 发布

原创最新推荐文章于 2024-04-28 17:10:33 发布 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue2 alias

Vue 专栏收录该内容

66 篇文章

订阅专栏

本文介绍了如何使用Webpack的alias功能简化Vue项目的文件引入路径，以提高开发效率。在Vue2中，我们可以在vue.config.js中直接配置resolve.alias，而在Vue3的CLI3.x中，需要通过chainWebpack间接修改配置。通过设置alias，我们可以避免复杂且易错的相对路径，例如将'@'映射到'src'目录，从而简化导入语句。同时，注意在样式和HTML模板中使用时，需要加～符号前缀。

使用 webpack 构建过 Vue 项目的同学应该知道 alias 的作用，我们可以使用它将复杂的文件路径定义成一个变量来访问。在不使用 alias 的项目中，我们引入文

件的时候通常会去计算被引入文件对于引入它的文件的相对路径，比如像这样：

import HelloWorld from '../../../../HelloWorld.vue'

一旦相对层次结构较深，我们就很难去定位所引入文件的具体位置，其实这并不是我们应该操心的地方，完全可以交给 webpack 来进行处理。在原生的 webpack

配置中我们可以定义 alias 来解决这一问题：

vue.config.js

vue2中配置

const webpack = require('webpack')

// 下卖弄diamante意思 是 让你免于在每一次设置alias时都写前面的 path.join
function resolve(dir) {
  return path.join(__dirname, dir)
}
const path = require('path');

module.exports = {
	lintOnSave: true,// eslint-loader 是否在保存的时候检查
	productionSourceMap: false, // 生产环境是否生成 sourceMap 文件, 
    filenameHashing: true, //文件hash
    configureWebpack: {
		 resolve: {
		    alias: {
				'@': resolve('./src')
		        '@asssets': resolve('./src/assets')
		    }
	    }
   } //vue-cli内部的webpack配置
}

上方我们在 webpack resolve（解析）对象下配置 alias 的值，将常用的一些路径赋值给了我们自定义的变量，这样我们便可以将第一个例子简化为：

import HelloWorld from '_com/HelloWorld.vue'

这样我们修改 webpack alias 来简化路径的优化就实现了。但是需要注意的是对于在样式及 html 模版中引用路径的简写时，前面需要加上 ～ 符，否则路径解析会失败，如：

.img {
    background: (~_img/home.png);
}

vue3中配置

而在 CLI 3.x 中我们无法直接操作 webpack 的配置文件，我们需要通过 chainWebpack 来进行间接修改，代码如下：

/* vue.config.js */
module.exports = {
    ...
    
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('_lib', resolve('src/common'))
            .set('_com', resolve('src/components'))
            .set('_img', resolve('src/images'))
            .set('_ser', resolve('src/services'))
    },
    
    ...
}