Vue中引用文件配置绝对路径，不在担心文件层级关系

引用文件时，将其相对路径配置成绝对路径，并自定义别名用来替换原文件的相对路径，容易识别，不用再考虑文件层级嵌套问题，不用再写那么长相对路径

配置前：

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 函数，使用__dirname获取当前文件所在的文件目录

function resolve (dir){
    return path.join(__dirname,dir)   //path.join(__dirname) 设置绝对路径
}

__dirname：当前配置的文件所在的绝对路径(双下划线)
dir：传入的文件夹

(3)在module.exports中设置别名

module.expots = {
    //...
    chainWebpack :(config) => {
        config.resolve.alias
            .set('@', resolve('./src'))
            .set('views',resolve('./src/view'))
            .set('assets',resolve('./src/assets'))
            //...可以继续自定义别名
             //set 第一个参数：设置的别名；第二个参数：原来默认的路径
    }
    //...
}

此时
@：表示 './src'
views: 表示 './src/view'
assets: 表示 './src/assets'
set 第一个参数：表示替换默认路径设置的别名；第二个参数：表示原来默认的路径

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

const path = require('path')
function resolve (dir){
    return path.join(__dirname,dir)   //path.join(__dirname) 设置绝对路径 双下划线
}

module.expots = {
    //...
    chainWepack :(config) => {
        config.resolve.alias
            .set('@', resolve('./src'))
            .set('views',resolve('./src/view'))
            .set('assets',resolve('./src/assets'))
            //...可以继续自定义别名
             //set 第一个参数：设置的别名；第二个参数：原来默认的路径
    }
    //...
}

配置完成，记得重启服务生效！