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
        }
    }