Vue之优雅的处理路径

---

前言

Vue之优雅的处理路径

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、问题描述

你是否在写Vue的时候也会遇到这种情景，引入组件或者依赖的时候那种超长的路径。图下面代码所示

import receivableGenerationManager from '@/views/js/accountReceivable/ReceivablesGeneration.js'
import adjustReceivablesManager from '@/views/js/accountReceivable/AdjustReceivables.js'

二、解决办法

首先我们都知道Vue-cli是基于webpack的，Webpack可以用alias给路径设置别名，那么我们在Vue-cli中添加webpack的配置怎么配置呢？

configureWebpack:{
 resolve: {
            alias: {
                "@acc": path.resolve(__dirname, "src/views/js/accountReceivable"),
            }
        }
}

那么我们就可以这么引入了

import receivableGenerationManager from '@acc/ReceivablesGeneration.js'
import adjustReceivablesManager from '@acc/AdjustReceivables.js'