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