项目结束了，总要总结下学到了什么知识，在此期间遇到了什么问题，下面就是在项目期间遇到的各种问题总结，希望看过的人可以提前避免。
(1).H5页面在iOS网页中手机号码颜色改变
H5页面在iOS网页中的数字被识别为电话号码,原因在于Safari浏览器的问题:解决该问题只需在head标签中添加如下代码即可解决。
<metaname="format-detection"content="telephone=no">
(2).用webpack后，控制文本显示行数没有用
我们通常设置文本换行的代码如下：
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient: vertica
在本地设置是有效的，但是打包后发现不换行了，代码是没有错的，想着可能是打包的问题，最终还是找到了打包后- webkit-box-orient样式会丢失。
讲述上代码更改为:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:1;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
注： -webkit-box-orient: vertical需要加上上文中的注释！
(3).html标签中有多个空格
设计图如下：
本想着用 <div>参数 产地 功效</div>一行代码搞定，项目编译后，发现文字中间只有一个空格的间距，可明明设置很多空格呢？最后发现只能用标签符：“ ” 代表空格的转意字符，如果有多个空格我们就复制粘贴输入多次“ ”即可。
实现如图效果代码为：
<div>参数 产地 功效</div>
(4).判断是IOS ，安卓，还是微信浏览器
通过判断浏览器的userAgent，用正则来判断手机是否是IOS（苹果）和Android（安卓）客户端。
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
ture 是 false 否
微信浏览器打开判断方法：
var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
if (isWeixin) {
return true;
}else{
return false;
}
(5).使用手机访问vue项目
在做vue项目测试时，需要放在手机上调试，那么如何放在手机上调试呢？毋庸置疑，直接使用ip地址+端口号用手机去访问电脑上的vue项目。
1. 把host中的改为“自己电脑的IP地址”
2.改为‘127.0.0.1’
3.改为‘localhost’
(6).vue返回上一页面时回到原先滚动的位置
测试时发现有些用户习惯从一向上滑动后的页面进入下一页面后，返回上一页面时任要求在原来的位置，可是vue是轻量级的应用，从以页面跳转后，直接销毁当前页了，如何实现这一要求呢？官网提到用keep-alive不让其刷新。
1).在App.vue中加入
<template>
<div id="app">
<!--<router-view/>-->
<!--页面返回不刷新-->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
2).index.js页面
export default new Router({
routes: [{
path: '/',
name: 'index',
component: index,
meta: {
keepAlive: true
}
},
这样在index.vue中，mounted方发只走一次，在浏览器上实现了返回原来滚动位置的目的。但是在手机上测试，发现没用，解决手机上实现目的的方法：
//在页面离开时记录滚动位置
beforeRouteLeave (to, from, next) {
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
next()
},
//进入该页面时，用之前保存的滚动位置赋值
beforeRouteEnter (to, from, next) {
next(vm => {
document.body.scrollTop = vm.scrollTop
})
},
(7).webpack打包后背景图片路径错误
background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2fbf2.png) no-repeat所以我们要保留css引用图片的正常路径，即：url(../../static/img/logo-index.2fbf2.png) no-repeat。那么就需要修改build文件夹下的utils.js代码，如图所示：
添加publicPath:'../../'这一行代码，这样不论是字体还是图片的引用问题都能解决。
(8).webpack打包后，css样式发生改变或不起作用
用run dev build打包后，发现样式改变了，最终发现addAdress.vue和myAdress.vue中的有个类名是相同的,css样式被相互污染了。
<style scoped></style>在style标签上添加scoped属性，就表示它的样式作用于当下的模块，样式私有化的目的就不会相互污染啊！为什么打包后会出现这样的结果呢!
原因：
1.使用了webpack2的语法规则不正确; webpack2要求必须写-loader;
2.可能是只写了css-loader，没有写style-loader；
3.顺序反了，必须写成 style-loader!css-loader;没写style-loader则build文件会生成，但你会发现页面中js不起作用；没写css-loader则会直接报错：’You may need an appropriate loader to handle this file type.’
以上就是在项目中遇到的问题，如果错误请具体指出！
本篇独发金蝶云社区
赞 84
打赏推荐阅读