vue设置代理

参考这个 https://www.jianshu.com/p/5ef2b17f9b25

1、介绍
这里的vue代理是 vue静态服务器做代理。使用的是 http-proxy-middleware 这个模块(这个模块相当于是node.js的一个插件)。

2、实际代码
vue设置代理
我的 api=’/rng’
我的请求地址 ${api}/xxxx/xxx ,请求地址就为 ‘/rng/xxxx/xxx’
当node服务器 遇到 以 ‘/rng’ 开头的请求,就会把 target 字段加上,那么我的请求地址就为 http://45.105.124.130:8081/rng/xxxx/xxx
下面的 pathRewrite 表示的意思是 把/rng 替换为 空,那么我的请求地址就为 http://45.105.124.130:8081/xxxx/xxx(用在如果你的实际请求地址没有 rng 的情况)

再记一个示例

module.exports = {
    devServer: {
        open: true,//自动打开浏览器
        host: 'localhost',//'0.0.0.0' ip地址
        port: 8080,
        https: false, //false关闭https,true为开启
        //以上的ip和端口是我们本机的;下面为需要跨域的
        // 讲解博客 https://www.jianshu.com/p/5ef2b17f9b25
        proxy: { //配置跨域
            '/shiro': {
                target: 'http://localhost:9090/shiro/', //这里后台的地址模拟的;应该填写你们真实的后台接口
                ws: true,
                changOrigin: true, //允许跨域
                pathRewrite: {
                    '^/shiro': '' //请求的时候使用这个api就可以
                }
            }

        }
        // 当在$axios 访问 /shiro/sys/login 时,先会把 target 字段加上 ,变为
        // http://localhost:9090/shiro/shiro/sys/login,然后在 pathRewrite 里把 /shiro 换为 ''
        // 变为 http://localhost:9090/shiro/sys/login
    },
    configureWebpack: {

        performance: {
            hints: 'warning',
            //入口起点的最大体积
            maxEntrypointSize: 50000000,
            //生成文件的最大体积
            maxAssetSize: 30000000,
            //只给出 js 文件的性能提示
            assetFilter: function(assetFilename) {
                return assetFilename.endsWith('.js');
            }
        }
    },
    publicPath: './',
}

vue设置代理

上一篇:Range对象


下一篇:NVIDIA GPU上的随机数生成