vue 配置 alias 别名

痛点

项目中经常会有引入根目录中其他文件夹下的文件,随着业务迭代开发,项目复杂度会变高这个时候就不能用简单的目录查找的方式去开发了,经常会出现 import {request} from '../../../lib/http/index'之类的

解决

通过webpack 提供的 alias 来配置别名

配置完成后 import {request} from '../../../lib/http/index' => import {request} from '@/lib/http/index' 肉眼可见的清晰明了很多,而且减少了目录查找,提高了效率

如何配置

以 vue 为例

项目根目录下建立 vue.config.js 文件这是 vue-cli 提供的配置 webpack 的方式在这里面写 webpack 配置,会自动合入 cli 中默认的 webpack 配置中配置 alias

const path = require('path')

function resolve(dir) {

return path.join(__dirname, dir)

}

module.exports = {

configureWebpack: {

name: 'demo',

resolve: {

alias: {

'@': resolve('src') //使用 @/ 的引用都会直接指向 src 目录

}

}

}

}

重新启动项目之后就可以验证是否配置成功了

文章链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：