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) 设置绝对路径
}

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

module.expots = {
    //...
    chainWebpack :(config) => {
        config.resolve.alias
            .set('@', resolve('./src'))
            .set('views',resolve('./src/view'))
            .set('assets',resolve('./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 第一个参数：设置的别名；第二个参数：原来默认的路径
    }
    //...
}

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