vue中配置@为src目录

vue中配置@为src目录

1.开发环境 vue.js
2.电脑系统windows10 专业版
3.在使用vue开发的过程中,我们经常会引入文件,通过我们都会使用相对路径 中 ../ ,这样的方式引入对应的文件,但是一旦文件结构发生了变化,这种方式就是一个坑,往往会出现找不到文件的情况。解决方法:在vue.config.js中进行配置,把@符号配置为src,这样的话,我们再次引入文件的话,就是 @/api 这种形式,这样不管怎么变,都不会出现找不到文件的情况。
4.在vue.config.js中添加如下代码:

const path=require('path');  
function resolve (dir) {  
    path.join(__dirname, dir);  
}  
module.exports = {   
 chainWebpack: config => {  
        config.resolve.alias.set('@', resolve('src'))  
    },  
 configureWebpack: {  
        resolve: {  
            extensions: ['js', 'vue'],  
 alias: {  
                '@': resolve('src')  
            }  
        }  
    }  
}

5.以上配置完成了,在vue组件中引入方式如下：

import {chen} from '@/api/Login/Login'

6.本期的分享到了这里就结束啦,是不是很棒,是不是很nice,让我们一起努力走向巅峰!