**背景：**app內嵌的一個個人名片頁面需要分享到微信，測試環境下，分享到微信後，安卓和蘋果手機都能正常渲染，生產環境蘋果手機沒問題，安卓手機打開分享的鏈接，頁面一直空白。
**原因分析：**單獨加了vconsole調試工具，可以看到安卓環境存在幾個報錯error{},並沒有報錯原因說明，因爲之前出現過這種問題，一般都是vue組件的html模板中存在語法錯誤，類似屬性重複之類的eg:input中同時出現v-model和:value。但是這種情況一般在安卓低端機中才出現，現在的情況是在所有安卓手機上都打不開分享的鏈接。但是，幾經查找頁面代碼，也沒找到錯誤，因此只好嘗試看是不是也可能是html出了問題。
頁面結構如上圖示，先把卡片部分註釋發了一版生產，發現頁面還是空白，然後又註釋掉了剩餘部分的還是沒有效果，最後整個html內容全部註釋，只保留幾個文字，神奇的事情發生了，可以打開原來分享的鏈接了，能看到頁面正常渲染出了保留的幾個文字。單獨註釋html代碼無效，整體註釋有效，但是頁面上需要渲染的數據都是從後臺接口獲取的，所以到底是哪裏出了問題呢，這時逐個參數對照發現一個漏網之魚，如下圖示：
上面三張圖分別是卡片使用fgsName的html部分，以及js中的data中定義的fgsName和在created()生命週期中對fgsName的重新賦值，因爲這個頁面是在app內和分享出去共用的一個頁面，所以這麼寫貌似沒啥問題。但是隻有這個參數不是後端接口返的，所以問題只有可能在這個字段上面。
假設就是這個字段出了問題，那麼只有一個可能–cookie不存在導致了語法錯誤。
因爲cookie中存儲的用戶信息是原生開發人員存進去的，分享到微信，脫離了app，cookie自然就不存在了，那麼在data方法中取cookie中的fgsName自然就更取不到了，既然如此，又爲何ios可以正常渲染，安卓卻不行呢。這時，突然就想起來main.js中關於從原生處獲取cookie的方法貌似處理不同，於是趕緊找到main.js中相關的代碼查看，如下圖：
可以看到當判斷設備是安卓手機時是通過cookie的get方法直接獲取的userinfo這個對象，如果userinfo不存在,Vue中全局添加的cookie對象也就不存在，從一個不存在的對象裏獲取一個屬性的值，肯定會存在語法錯誤，但是ios環境的時候至少Vue中全局添加的cookie對象是存在的，只不過這個對象的屬性值都是null，undefined,或者""(具體是啥，就要看ios開發人員是如何處理的了)，所以，ios不存在語法錯誤，頁面可以正常渲染。
**解決方法：**好的，幾乎可以確定就是這個地方的問題了，假設真的是這個問題，那麼解決也很容易，只需要在安卓的判斷裏再加一個cookie是否存在的判斷即可
Vue.prototype.$cookie = this.$cookies.get('userinfo');
if (!Vue.prototype.$cookie) {
Vue.prototype.$cookie = {}
}
經發布生產驗證，以上問題定位準確及解決辦法可行。
爲什麼確認自己寫的代碼沒問題，第一次卻沒有想到可能是mian.js的問題呢，因爲其實，以前出現過類似問題，當時是因爲和第三方協作獲取token的問題，針對安卓統一加上了這個處理，後續生產上也採用了這個方法統一處理，測試環境是沒問題的，只是沒想到生產上的main.js沒有添上或者被誰中間提交過的沒有添加判斷的代碼覆蓋了。
中間其實走了好多彎路，寫起來太繁瑣了，只大概寫了下後續的分析歷程，哎，心累，希望能幫到小夥伴，也記錄下這個過程提醒自己。
寫完之後才發現，自己上一篇博客好像也是因爲$cookie不存在導致的問題，哎，這是要栽幾次才記住啊，天吶，我這個腦子真像是湊數的，嗚嗚嗚~~~