VUE UI CLI代理模式配置

VUE UI 中代理模式配置

本文配置主要是针对于使用VUE官方自带的UI界面生成VUE脚手架项目

一、学习配置一个VUE全局变量、对象

    1、在main.js中添加Vue.prototype.$ScarecrowTool = 你的对象或者变量;这样就可以在全局中的任意一个vue组件中使用this.$ScarecrowTool来访问到你自己自定义的变量。

    2、有些人喜欢使用http来提axios就可以采用上面的方法自定义http=axios


二、找到vue的全局配置文件:vue.config.js 此文件是提供给用户自己自定义部分webpack配置。在配置文件中添加:

module.exports = {
  productionSourceMap: false,
    configureWebpack : {
        //解决打包文件过大报错的配置
        performance: {
            hints:'warning',
            //入口起点的最大体积 整数类型(以字节为单位)
            maxEntrypointSize: 50000000,
            //生成文件的最大体积 整数类型(以字节为单位 300k)
            maxAssetSize: 30000000,
            //只给出 js 文件的性能提示
            assetFilter: function(assetFilename) {
                return assetFilename.endsWith('.js');
            }
        },
        //配置一个测试服务器,这就是我们本文需要的代理配置
        devServer: {
            proxy: {
                '/api': {
                    target: 'http://www.blog.com',
                    changeOrigin: true, //是否跨域
                    pathRewrite: {
                        '^/api': '' //规定请求地址以什么作为开头
                    }
                }
            }
        }
    }
}


配置之后,每个请求的接口都必须用http://host/api/  开始,当检测到/api开头的地址就会被此代理转发到我们配置的target上去。eg:http://host/api/test 就会被代理到 http://www.blog.com/test 上。


以上内容均为Scarecrow原创,如有不正确之处请联系我整改,谢谢

阅读数:238
如有疑问请与我联系:点击与我联系