其實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引數的時候，最好做一次重新整理。

重新整理的方式很多，不做介紹