前言
@的作用其实就是为了防止在引入较多层级目录文件时出错的简易写法,诸如:
import {fitherPath} from '../../../../../../../utils/user'
因此,为了规避这种问题,我们可以配置@来简化路径。
安装path
npm install path --save
在vue.config.js中进行配置
let path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: (config) => {
config.resolve.alias
.set('@', resolve('src'))
// key,value可以自行定义,比如.set('@@', resolve('src/components'))
.set("assets", resolve("src/assets"))
.set("components", resolve("src/components"))
.set("utils", resolve("utils"))
},
};
重新启动项目
npm run serve
项目中使用@开头的路径
import {createTimes} from '@/utils/index'