其实vue和这些问题没有什么冲突，移动端的问题主要体现跨域、苹果手机的兼容和微信浏览器上。

技术栈

vue2.0 + vuex + vue-router + webpack + axios + scss + ES6/7

cookies跨域不能携带

cookies在跨域的时候，每次刷新，cookies的值都会发生变化。这个时候是已经设置了 Access-Control-Allow-Origin：* ，然后再设置上withCredentials: true ，最后再尝试一下，不仅cookies带不过来，之前还可以跨域的请求，现在都报错了。你对错误一无所知。

网上给了一些解释，意思是，你的前端与后端不在同一主域下（就是不在同一域名下）。而且刚刚设置的两个东西会造成冲突， withCredentials: true 导致跨域的设置失效了。

既然都用了vue，那就配置一个代理吧

用 vue-cli 3.0 构建的vue项目与 vue-cli 2.0 构建的项目，在目录上会发生变化，配置文件也会改变。不过配置的时候，内容还是不会变化的。

vue-cli 2.0 下的配置

找到根目录，在 config 文件夹下的 index.js 内，加上以下代码。具体每一项表示的含义，可以去webpack的官网里找。这样设置之后，cookies的值也不会每次变化了。

module.exports = {
    dev: {
        proxyTable: {
            '/xxx': {
                target: 'http://192.168.1.1:8080',
                ws: true,
                changeOrigin: true
            }
        }
    }
}

vue-cli 3.0 下的配置

与 vue-cli 2.0 的配置是一样的，唯一比较麻烦的是， vue-cli 3.0 隐藏了配置文件，项目看上去变得很简洁，所以找不到在哪里配置。

在根目录下新建文件 vue.config.js ，项目会默认读取这个文件。文件的详细配置可以在 github地址里仔细阅读。

打开新建好的 vue.config.js ，写上上面那段代码后，重启一下项目就好了。

重点

修改了这个配置，一定要重启应用，否则修改将不会生效。

另外，如果在开发中使用了跨域，在实际的生产中，webpack 的代理肯定就用不了了，需要使用 nginx 来做代理。

不想配置代理的看这里。但是，需要后端配合修改

这里以 axios 为例，使用的时候将 axios 当成 vue 的全局对象处理。代码如下：

axios.defaults.withCredentials = true;
axios.defaults.crossDomain = true;
Vue.prototype.$axios = axios;

因为需要跨域， withCredentials 和 crossDomain 都需要配置，后端的看一下别人家的博客吧。因为不是我写的，就不乱说了。

使用 axios 时，直接这么使用：

this.$axios({...})

苹果手机的样式兼容

作为苦逼的前端，只用得起OPPO R9s，无奈80%的用户都是苹果手机，和另一个小米Note的前端兄dei一起花了三天调试苹果的兼容问题。

问题什么时候会出现，完全没有意料到，iphone 7 与 7P 的显示就有不同，与 iphone 6 还有 iphone 8 也不一样。做这种调试，真的得所有的苹果机型都得有才行。谁让苹果手机这么耐用，除了被偷，和有钱，手机可以用到电池爆炸。

苹果手机的问题主要以下4种：

1. 图片扭曲，甚至变形
2. 在滚动的时候很卡顿
3. 点击的时候会出现蓝色的遮罩层
4. 被固定的头部还有底部，在上拉和下拉的时候都会被遮住

图片扭曲，甚至变形

出现这个问题，是高估了苹果手机在app里提供的内核的性能。查阅了一些资料，说的是苹果为app提供的内核，渲染效率还有兼容性都是非常低下的。苹果兼容问题，百度、谷歌一下，都是一大堆的抱怨。

我这里的问题是因为使用了vue 的 v-if 来渲染图片。场景是这样的，有5张图片，需要根据传入的参数来选择显示哪一张，点击下面的选项时，图片还可以跟着变化。然后神奇的一幕发生，图片各种扭曲，变形，甚至分裂。检查了一遍样式，没发现问题后，我把 v-show 替换了 v-if 然后就好了。然后开始怀疑人生，苹果手机，还是 7p ，渲染效率低的可怕啊。

滚动的时候卡顿

卡顿嘛，很正常，于是在 #app 下加上了一句 -webkit-overflow-scrolling: touch; ，就不卡顿了。你以为问题解决了吗？

拿出安卓手机一试，分分钟想打人。

机智的小米Note兄dei，把这句话加了 body 标签上，同时加上了一句 overflow: auto 就好了。

点击的时候会出现蓝色的遮罩层

这个很简单，在 IOS 系统下， webkit 内核的问题，加上一句 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) 就行了

被固定的头部还有底部，在上拉和下拉的时候都会被遮住

既然用户是苹果，别想着用 fixed 定位了。元素被固定住的时候，怎么拉都不行。只有通过布局的方式，让这个看起来更像固定定位

微信浏览器

用了 vue 就得明白，有的时候链接上的参数是有的，但是从微信点击“复制链接”和“在浏览器打开”的时候，参数就没了。是因为，浏览器仍然读取的是上一次的地址。在需要URL参数的时候，最好做一次刷新。

刷新的方式很多，不做介绍