引用文件时，将其相对路径配置成绝对路径，并自定义别名用来替换原文件的相对路径，容易识别，不用再考虑文件层级嵌套问题，不用再写那么长相对路径
配置前：
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 第一个参数：设置的别名；第二个参数：原来默认的路径
}
//...
}
配置完成，记得重启服务生效！
