Vue->cli3x配置路径别名

前言

在几个月前我就开始再使用vue-cli3x的脚手架了，配置方面尤大大真的是优化得很不错，在这里体广大开发者向你致敬，本文会讲述如何在vue-cli3x中配置路径别名，避免新手对目录结构认识不清淅书写错误的路径问题

第一步

在项目根目录建立vue.config.js 注意:文件名称必须是vue.config.js不然不会被解析

第二步

直接复制一下代码

const path = require('path')

function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    lintOnSave: true,
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@$', resolve('src'))
            .set('base', resolve('src/base'))
            .set('views',resolve('src/views'))
            .set('common', resolve('src/common'))
            .set('components', resolve('src/components'))
    }
}
复制代码

第三步

直接在组件或者路由文件中使用，例如

import appBar from 'base/bar'
import appGrid from 'base/grid'
import appHeader from 'base/header'
import appBanner from 'components/banner'
import appListView from 'components/list'
复制代码

写在最后

但愿个人分享对你有所帮助，更多资讯请持续关注，我会分享愈来愈多的实战经验哦！ 或加入大前端知识体系社区一块儿探索技术:608229520