Vue cli项目中的跨域配置 -＞ 反向代理

以请求猫眼电影数据为例

一、在组件的methods选项中配置请求数据的方法，请求数据

methods:{
        getMaoyanData(){
            this.$http.get('https://m.maoyan.com/ajax/movieOnInfoList',{//请求的地址：?前面的部分
                params:{
                    token:'',
                    optimus_uuid: '52CBC1F0D32411EA9168D3A31F729789EDA28E18F66341B7B4C3DE262A1CB272',
                    optimus_risk_level: 71,
                    optimus_code: 10
                }
            }).then(res=>console.lists('res',res))
            .catch(error=>Promise.reject(error))
        },
    },

然后就出现了跨域报错
如何在Vue cli项目中添加跨域配置呢?【webpack配置】

二、 跨域配置 -> 反向代理

vue.config.js中

 //1.此文件为webpack配置文件
//2.此文件也是Node.js文件，所以使用的是Common.js规范

module.exports={//导出一个对象
    //配置项
    //1.服务器配置
    devServer:{
        open:true,//自动开启服务
        port:9000,//修改服务器端口号
        hot:true,//热加载 自动刷新页面
        //--------上述是cli项目后续添加的一些配置，可忽略----------
        proxy:{
            //标识符：配置符
            //标识符选择域名后的第一个路径
            //target 就是目标源[协议 + 域名 + 端口]
            '/ajax':{
                target:'https://m.maoyan.com',
                changeOrgin:true//使用我们当前的服务器来代替target
                //即http://localhost:9000 代替 https://m.maoyan.com
            }
        }
    }
}

在根目录下创建名为 vue.config.js , webpack配置文件
切记：配置文件修改了，项目必须重启

三、配置完成，即可请求到数据了，接着进行后续的渲染操作

问题：发现图片路径中有个w.h，这是携带的尺寸 ，我们没有进行配置，因此图片无法在页面上显示出来，移动端这个尺寸是 ’128.180’。
只需要将图片路径字符串中的 ‘w.h’ 替换成 ’128.180’ 就可以显示出图片，但是这样作用范围只在这一个页面上
解决方案 : 需要做个过滤器，而且是全局的，这样所有的组件，所有页面都能用到

四、自定义插件

——自定义过滤器
1.创建自定义插件
路径：src/plugins/index.js

//自定义插件
export default{
    //install 不能改
    install(Vue){//Vue就是构造函数
        Vue.filter('imgFilter',function(val,size){
            return val.replace('w.h',size)
        })
    }
}

2.在入口文件main.js中去引入自定义插件

//引入自定义插件
import myPlugin from './plugins'//index.js可以忽略
Vue.use(myPlugin);//注册 激活插件        与index.js文件创建联系

3.组件模板中引用自定义过滤器

<img :src=" item.img | imgFilter('128.180') " alt="">

五、配置不同端的不同尺寸

3个端(PC端、移动端、ipad端)是对应不同的尺寸，
所以需要将传入的尺寸数据写活

mounted(){
        //组件挂载结束，根据判断它是哪一个端，来赋值给它不同的尺寸
        const {userAgent}=window.navigator;
        if(userAgent.indexOf('iPhone')!=-1 || userAgent.indexOf('Android')!=-1){//移动端
            this.size='128.180'
            return
        }
        if(userAgent.indexOf('iPad')!=-1){//iPad端
            this.size='300.300'
            return
        }
        if(userAgent.indexOf('Windows')!=-1 || userAgent.indexOf('Mac')!=-1){//PC端
            this.size='600.600'
            return
        }
    }