vue项目遇到的问题以及解决方案

一、视图无实时刷新问题

解决方案：

this.$nextTick(function(){

     //  需要改变的数据
})

二、在webAPP时单位的换算

window.onresize = function () {
    ​​​​document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 +"px";
}

注意：若UI的设计图为750px，此时，在以下情况中，根据给定或测得的数据大小/100，即设置的大小。

三、在开发环境下，使用axios进行数据交互时，遇到跨域问题

问题报错：No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

解决方案：

1.首先在main.js配置如下代码

Vue.prototype.$axios = Axios
Axios.defaults.baseURL = '/api'
Axios.defaults.headers.post['Content-Type'] = 'application/json';

2.其次在index.js 中的proxyTable配置如下代码

 proxyTable: {
      '/api':{
        target: "http://xxxx/",
        secure: false,
        changeOrigin:true,
        pathRewrite:{
            '^/api':''
        }
      }
    },

3.然后把axios请求改成

var _this=this;
 _this.$axios.get("/api/js/shopData.json").then(res=>{
       console.log(res.data)
})

如图所示：

四、vue项目真机测试

1）有时候我们在vue真机测试的时候，希望通过IP地址第访问页面。
2）比如：192.168.1.105:8080 但是发现打不开，无法访问
3）这是因为前段项目是通过webpack-dev-server启动的。而它默认不支持通过ip地址访问。这时候就需要对package.json中的配置项做修改。
4）然后我们就可以通过手机输入IP地址来测试项目了。

解决方案：

五、安卓手机上真机测试白屏的问题

问题原因：主要是因为有些安卓手机浏览器不支持promise，可以引入一个插件来解决。

解决方案：

cnpm install babel-polyfill --save

在main.js里面引入
import ‘babel-polyfill’

六、解绑全局事件问题

解决方案：

mounted() {  
      window.addEventListener('scroll', this.handleScroll)
    },
unmounted() {
      // 解绑全局事件，否则会在所有页面都触发这个事件，这就需要解绑。
      window.removeEventListener('scroll', this.handleScroll)
    }

七、vuex的流程图

八、Axios请求 的函数封装问题

//  get封装

	Vue.prototype.post = function (url,data,fun,headers){	
	  			this.$axios.post(url,data,{headers:headers})
	             .then(function (response) {
	                if(fun){ 
	                  fun(response.data);
	                }
	            })
	            .catch(function (error) {
	            	// alert(error)
	            });
	}

//  post封装
 
	Vue.prototype.get = function (url,data,fun,headers){ 
    	this.$axios.defaults.withCredentials = true 
	  	this.$axios.get(url,{headers:headers,params: data})
	             .then(function (response) {
	                if(fun){
	                  fun(response.data);
	                }
	            })
	            .catch(function (error) {
	            	// alert(error);
	            });
	}

九、打包之后页面空白的问题

解决方案：

assetsPublicPath: './',

十、app.js的体积过大分割项目，实现懒加载

const Home = r => require.ensure([], () => r(require('@/pages/Home')), 'home') 

十一、在使用vue.js框架的时候，有时候会希望在页面渲染完成之后，再来执行某个函数方法

解决方案：

watch：{
    // 监测路由的变化，只要发生变化就调用获取路由参数方法将数据存储本组件即可；
    'Sroute':'getParams',
    headImgList:function(){
        this.$nextTick(function(){
            // do  somthing 
        })
    }
}

headImgList 是我要监听的列表数组，当他全部加载结束之后再执行某任务；

十二、在微信中分享网站，如何在地址栏中截取内容，并且重定向页面，重新添加新获取的内容

if(/MicroMessenger/.test(window.navigator.userAgent)){ 
    var openId = this.getUrlKey("openid"); 
     if(openId==undefined || openId=="" || openId==null){  
          openId = this.getStorage(this.Storage.WX_openId);
          if(openId==undefined || openId=="" || openId==null){   
                this.saveStorage("lastURI",location.href);   
                location.href="http://你的微信域名地址/wx/load?redirectURL="+this.baseURL+"?token=413445f4545";
                return;                  
          } 
    }else{
         this.saveWxUserStorage(openId);   
         var lastURI = this.getStorage("lastURI");
         if(lastURI==undefined || lastURI==""){
             lastURI = this.baseURL;
         } 
         location.href=lastURI; 
    }           
}else{ 
     this.clearStorage(this.Storage.WX_openId);
} 

十三、异步回调函数中使用this无法指向vue实例对象

场景：setTimeout/setInterval ajax Promise等等

解决方案：

  //箭头函数访问this实例 因为箭头函数本身没有绑定this
     setTimeout(() => { 
       console.log(this);
    }, 500);


    //使用变量访问this实例
    let self=this;
        setTimeout(function () {  
          console.log(self);//使用self变量访问this实例
        },1000);


说明：setInterval路由跳转继续运行并没有及时进行销毁

十四、setInterval路由跳转继续运行并没有及时进行销毁

使用场景：比如一些弹幕，走马灯文字，这类需要定时调用的，路由跳转之后，因为组件已经销毁了，但是setInterval还没有销毁，还在继续后台调用，控制台会不断报错，如果运算量大的话，无法及时清除，会导致严重的页面卡顿。

解决方案：在组件生命周期beforeDestroy停止setInterval

//组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。
beforeDestroy(){
     //我通常是把setInterval()定时器赋值给this实例，然后就可以像下面这么停止。
    clearInterval(this.intervalId);
}

十五、vue 滚动行为用法,进入路由需要滚动到浏览器底部 头部等等

使用场景：使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

解决方案：

 const router = new VueRouter({
     mode: 'history',
     scrollBehavior(to, from, savedPosition) {
         if (savedPosition) { //如果savedPosition存在，滚动条会自动跳到记录的值的地方
             return savedPosition
         } else {
             return {
                 x: 0,
                 y: 0
             } //savedPosition也是一个记录x轴和y轴位置的对象
         }
     }，
     routes: [...]
 })

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

十六、使用better-scroll插件实现滚动时点击失效问题

解决方案：

this.scroll = new Bscroll(this.$refs.wrapper,{click:true})

十七、IE9中，elementUI的el-input删除操作无法触发数据变动监听

解决方案：加入ie9input事件垫片

cnpm install --save ie9-oninput-polyfill

十八、Vue框架里使用Swiper

1.下载swiper

npm install swiper

2.引入swiper

import Swiper from ‘swiper’;
import ‘swiper/dist/css/swiper.min.css’;

3.使用swiper

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="../../static/images/ad1.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="../../static/images/ad2.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="../../static/images/ad3.jpg" alt="">
      </div>
    </div>
  </div>

4.调用方式：mounted里面调用

   mounted(){
       var mySwiper = new Swiper('.swiper-container', {
         autoplay:true,
         loop:true
       })
     },

注意：如果想要从后台请求图片放上去 new Swiper要写在网络请求成功的函数里面，否则不会出来数据。