引用文件時，將其相對路徑配置成絕對路徑，并自定義別名用來替換原文件的相對路徑，容易識別，不用再考慮文件層級嵌套問題，不用再寫那么長相對路徑

配置前：

import Login from './src/components/Login.vue'
import userInfo from './src/view/user/userInfo.vue'
import  './src/assets/style/base.css'

配置后：

import Login from '@/components/Login.vue'
import userInfo from 'view/user/userInfo.vue'
import  'assets/style/base.css'

在vue.config.js中配置

(1)引入node里面加載的path模塊

const path = require('path')

(2)封裝resolve 函數(shù)，使用__dirname獲取當前文件所在的文件目錄

function resolve (dir){
    return path.join(__dirname,dir)   //path.join(__dirname) 設(shè)置絕對路徑
}

__dirname：當前配置的文件所在的絕對路徑(雙下劃線)
dir：傳入的文件夾

(3)在module.exports中設(shè)置別名

module.expots = {
    //...
    chainWebpack :(config) => {
        config.resolve.alias
            .set('@', resolve('./src'))
            .set('views',resolve('./src/view'))
            .set('assets',resolve('./src/assets'))
            //...可以繼續(xù)自定義別名
             //set 第一個參數(shù)：設(shè)置的別名；第二個參數(shù)：原來默認的路徑
    }
    //...
}

此時
@：表示 './src'
views: 表示 './src/view'
assets: 表示 './src/assets'
set 第一個參數(shù)：表示替換默認路徑設(shè)置的別名；第二個參數(shù)：表示原來默認的路徑

vue.config.js中配置的全部代碼

const path = require('path')
function resolve (dir){
    return path.join(__dirname,dir)   //path.join(__dirname) 設(shè)置絕對路徑 雙下劃線
}

module.expots = {
    //...
    chainWepack :(config) => {
        config.resolve.alias
            .set('@', resolve('./src'))
            .set('views',resolve('./src/view'))
            .set('assets',resolve('./src/assets'))
            //...可以繼續(xù)自定義別名
             //set 第一個參數(shù)：設(shè)置的別名；第二個參數(shù)：原來默認的路徑
    }
    //...
}

配置完成，記得重啟服務(wù)生效！