美文网首页
vue-cli3.0跨域配置

vue-cli3.0跨域配置

作者: _duck不必 | 来源:发表于2020-06-12 10:26 被阅读0次

    新建vue.config.js文件(此文件跟src文件夹同级)

    然后加入以下代码

    module.exports = {
        devServer: {
    
            proxy: {
                /*
                    此处的斜杠可以改成任何前缀
                */
                '^/': {
                    target: '需要代理的接口地址',
                    changeOrigin: true,
                    pathRewrite: {
                    /*
                        此处的^/要跟上面的对应,这一步是要重写url的地址
                    */
                      '^/': '/'
                    }
                },
    
            }, // string | Object
            before: app => {}
        },
    }
    

    然后在main.js中修改配置

    /*
        这一步是区分开发环境跟生产环境,如果是线上环境就用域名,本地环境就默认斜杠
    */
    axios.defaults.baseURL = process.env.NODE_ENV == 'development' ? '/' : '线上接口地址的域名';
    

    当然,在某些情况下你或许需要配置多个代理

    如果是多个代理

    module.exports = {
        devServer: {
    
            proxy: {
                /*
                    此处的斜杠可以改成任何前缀
                */
                '^/aaa': {
                    target: '需要代理的接口地址',
                    changeOrigin: true,
                    pathRewrite: {
                    /*
                        此处的^/要跟上面的对应,这一步是要重写url的地址
                    */
                      '^/aaa': '/'
                    }
                },
                '^/bbb': {
                    target: '需要代理的接口地址',
                    changeOrigin: true,
                    pathRewrite: {
                    /*
                        此处的^/要跟上面的对应,这一步是要重写url的地址
                    */
                      '^/bbb': '/'
                    }
                },
            }, // string | Object
            before: app => {}
        },
    }
    
    

    这么写即可

    相关文章

      网友评论

          本文标题:vue-cli3.0跨域配置

          本文链接:https://www.haomeiwen.com/subject/czcgtktx.html