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

您所在的位置：网站首页 › react项目中遇到的问题及解决方法 › vue项目遇到的问题以及解决方案

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

2023-07-28 06:28| 来源: 网络整理| 查看: 265

一、视图无实时刷新问题

解决方案：

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

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

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

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

【本文地址】

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

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

今日新闻

推荐新闻