Vue.js的学习过程与心得码农的世界前端

vue 项目中常见的几个小问题

2018-12-05  本文已影响7人  honey缘木鱼

(1).H5页面在iOS网页中手机号码颜色改变

H5页面在iOS网页中的数字被识别为电话号码,原因在于Safari浏览器的问题:解决该问题只需在head标签中添加如下代码即可解决。

<metaname="format-detection"content="telephone=no"> 

在Vue上的具体代码位置如图:


项目路径 FF730ACF-F192-4548-8961-1C69BE380223.png

(1).用webpack后,控制文本显示行数没有用

  overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient: vertical;

用上述代码来设置换行,在本地设置是有效的,但是打包后发现不换行了,代码是没有错的,想着可能是打包的问题,最终还是找到了打包后-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需要加上上文中的注释!

(1).用webpack后,某些图片找不到路径

我们刚开始创建Vue项目时,把图片放在了如下图路径:


9AEDFFAC-7C18-45D5-9931-AE5D8DC71F91.png

打包后,发现项目中图片不显示,才知道原来打包时图片是在src中寻找,根本找不到啊,我们应该把图片文件夹整体挪到了如图:

图片

这样完美解决问题!

上一篇下一篇

猜你喜欢

热点阅读