美文网首页vue
Cordova vue-cli3 集成打包成apk以及遇到的问题

Cordova vue-cli3 集成打包成apk以及遇到的问题

作者: xiaoqingnian_ | 来源:发表于2020-12-15 10:45 被阅读0次

    1)总结问题

    1)一个项目中有2+以上的url请求,原因是后台分模块化的,导致前端一个项目中会有不同的请求,比如登录是8001,里面其他的明细是8002
    2)cordova 和 vue 集成打包apk后,无法访问后台的接口问题,可正常浏览器模拟是没有问题的,原因是vue的npm run build 命令,该命令打包的文件默认不是生成环境,所以在封装BASE_URL(统称后台地址)时,注意路径问题和vue3跨域以及在android里的AndroidManifest.xml 添加 android:hardwareAccelerated="true"
    3)cordova 项目 和 vue的项目同层级
    4)简单露出代码,如不懂可留言咨询,博主一定会回答

    //vue3跨域
      proxy: {
                 '/mes': {
                    target:'http://10.4.12.248:8000/mes',
                    ngeOrigin: true,
                    ws: true,
                    pathRewrite: {
                      '^/mes': ''
                    }
                  },
                  '/wms': {
                    target:'http://10.4.12.248:8001/wms',
                   ngeOrigin: true,
                    ws: true,
                    pathRewrite: {
                      '^/wms': ''
                    }
                  }
                }
    
    //cordova 结合 vue3 配置,跟vue项目同层级
             publicPath:'./',
             outputDir:'../cordovademo/www',
             productionSourceMap:false,
    //-----------------------------------------
    //main.js 中 引入 cordova
    import VueCordova from 'vue-cordova'
    
    Vue.use(VueCordova)
    
    
    // add cordova.js only if serving the app through file://
    if (window.location.protocol === 'file:' || window.location.port === '8888') {
      var cordovaScript = document.createElement('script')
      cordovaScript.setAttribute('type', 'text/javascript')
      cordovaScript.setAttribute('src', 'cordova.js')
      document.body.appendChild(cordovaScript)
    }
    //测试的
    Vue.cordova.on('deviceready', () => {
      console.log('Cordova : device is ready !');
      console.log('Vue.cordova :', Vue.cordova);
    });
    
    //2+ 以上的url地址请求封装 创建axiosInit.js 封装请求的地址 我的目录放在了src 下面的utils文件夹下
    import axios from 'axios';
    
    let mes_url='';
    let wms_url='';
    
    
    if (process.env.NODE_ENV === "development") {
        //'/api'为vue.config.js中设置的proxy代理
        mes_url='/mes'; 
        wms_url='/wms'; 
    }else {
        mes_url='http://10.4.12.248:8000/mes';
        wms_url='http://10.4.12.248:8001/wms'
    }
    
    const mes_req=axios.create({
        baseURL:mes_url,
        timeout:60000    //1m
    });
    
    const wms_req=axios.create({
        baseURL:wms_url,
        timeout:60000   //1m
    });
    
    //请求、响应拦截 
    
    /*mes_req.interceptors.request.use(function(req){
        alert(req.url)
        if(req.url.includes('127.0.0.1')||req.url.includes('localhost')){
            alert(1)
        }else{
            alert(2)
        }
      return req;
    });*/
    
    /*wms_req.interceptors.request.use(function(req){
        alert(wms_url)
        alert(req.url)
      return req;
    });
    */
    
    const service={
        mes_req,wms_req
    }
    
    export default service;
    
    //-----------------------------------------
    //main.js 中引入
    import axiosInit from './utils/axiosInit'
    Vue.prototype.mes_req=axiosInit.mes_req;
    Vue.prototype.wms_req=axiosInit.wms_req;
    
    //-----------------------------------------
    //实例请求 登录 和 其他明细
      methods:{
        async login(){
          this.wms_req({
            method:'post',
            url:'/login',
            data:{
                userName:this.username,
                passWord:this.password
            }
          }).then(res=>{
           const {code,data,message} = res.data;
           if(code==='200'){
             this.$toast.success(message);
             localStorage.setItem('token',data.token);
             localStorage.setItem('user',data.userInfo); 
             //this.$router.push('/tabbarPage');
             this.$router.push('/home');
           }else{
              this.$toast.fail(message)
           }
          }).catch(err=>{
              alert(err);
          }) ;
        }
      }
    
     getAllWoTask(){
                    
                    this.mes_req({
                      method:'post',
                      url:'/wo/list',
                      header:{
                              'Content-Type':'application/json'  //如果写成contentType会报错
                          },
                      data: this.prams
                    }).then(res=>{
                    const {code,data} = res.data;
                     if(code==='200'){
                         console.log()
                         this.list=[...this.list,...data.list];
                         this.totalNum=this.totalNum+data.list.length;
                        
                        //每一次加载完设置false,便于下次继续加载
                        this.loading=false;
                        this.refreshing = false;
                        this.isSearch=false;
                        //判断是否还有数据加载
                        if(data.length<this.prams.size){
                            this.finished=true;
                        }
                        
                        
                     }else{
                        this.$toast.fail(message)
                     }
                    });
                }
    
    结束了,你们还有什么问题?
    

    希望此教程可以帮助到你们。❤❤❤

    相关文章

      网友评论

        本文标题:Cordova vue-cli3 集成打包成apk以及遇到的问题

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