Vue.config.js配置前端跨域请求及目录别名

在项目根目录下新建vue.config.js文件(必须)

const path = require('path')

function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    baseUrl: './',    //静态资源大宝路径
    lintOnSave: true,
    //配置跨域请求
    devServer: {
        open: true,    //是否自动打开浏览器
        host: 'localhost',
        port: 8081,    //启动端口号
        https: false,    //是否开启https
        hotOnly: false,
        proxy: { // 配置跨域
            '/api': {
                target: 'http://localhost:3000/api/',
                ws: true,
                changOrigin: true,    //是否开启代理
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        before: app => {}
    },

    //配置目录别名
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@$', resolve('src'))
            .set('base', resolve('src/base'))
            .set('views', resolve('src/views'))
            .set('common', resolve('src/common'))
            .set('components', resolve('src/components'))
    }
}

绝对的干货，希望对你有所帮助，记得收藏哦！