vue项⽬遇到的问题以及解决⽅案⼀、视图⽆实时刷新问题
解决⽅案：
this.$nextTick(function(){
//  需要改变的数据
})
⼆、在webAPP时单位的换算
d ocument.documentElement.style.fontSiz
e = 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: "xxxx/",
secure: false,
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
},
3.然后把axios请求改成
var _this=this;
_this.$("/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() {
// 解绑全局事件，否则会在所有页⾯都触发这个事件，这就需要解绑。      veEventListener('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封装
= function (url,data,fun,headers){
this.$axios.defaults.withCredentials = true
this.$(url,{headers:headers,params: data})
.then(function (response) {
if(fun){
fun(response.data);
}
})
.catch(function (error) {
// alert(error);
});
}
九、打包之后页⾯空⽩的问题
解决⽅案：
assetsPublicPath: './',
⼗、app.js的体积过⼤分割项⽬，实现懒加载
const Home = r => sure([], () => r(require('@/pages/Home')), 'home')
⼗⼀、在使⽤vue.js框架的时候，有时候会希望在页⾯渲染完成之后，再来执⾏某个函数⽅法解决⽅案：
vuejs流程图插件watch：{
// 监测路由的变化，只要发⽣变化就调⽤获取路由参数⽅法将数据存储本组件即可；
'Sroute':'getParams',
headImgList:function(){
this.$nextTick(function(){
// do  somthing
})
}
}
headImgList 是我要监听的列表数组，当他全部加载结束之后再执⾏某任务；
⼗⼆、在中分享⽹站，如何在地址栏中截取内容，并且重定向页⾯，重新添加新获取的内容
if(/MicroMessenger/.test(window.navigator.userAgent)){
var openId = UrlKey("openid");
if(openId==undefined || openId=="" || openId==null){
openId = Storage(this.Storage.WX_openId);
if(openId==undefined || openId=="" || openId==null){
this.saveStorage("lastURI",location.href);
location.href="你的域名地址/wx/load?redirectURL="+this.baseURL+"?token=413445f4545";
return;
}
}else{
this.saveWxUserStorage(openId);
var lastURI = Storage("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})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。