vue cli3配置跨域代理

发表于

最近要使用vue，因为以前没有接触过，而且我直接上手了vue-cli 3版本，现在能查到的vue-cli3的内容还很少，所以记录一下我学习时候遇到的坑。 参考文献

问题描述

配置vue的proxy代理功能，因为3版本的cli没有了static目录，也没有webpack.js文件，导致这个坑我查了好久

解决办法

  • 将原本放在static目录下的mock文件生成到public目录下

  • 在根目录创建vue.config.js文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    module.exports = {
        devServer: {
            proxy: {
                '/api': {
                    target: 'http://localhost:8080',
                    changeOrigin: true,
                    ws: true,
                    pathRewrite: {
                      '^/api': '/mock/'
                    }
                }
            }
        }
    }

  • 使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    methods:{
        getHomeInfo(){
            //在这里就可以直接使用/api/而不用每次都自己去public目录下一级一级找文件
            axios.get('/api/test.json')
                .then(this.getHomeInfoSucc)
        },
        getHomeInfoSucc(res){
            console.log(res)
        }
    }