2020.09.11
前言:利用Vue.js開發前端Web，我幾乎都用Chrome進行測試，也很快樂，但拿IE進行測試，頓時大驚訝，全部都是白的，看到幾乎心涼了一半，因為政府部門還是堅持IE必須能跑，至少IE11，所以我就研究了一整個上午，終於找到解法了，因此記錄下來。
拿IE去跑，畫面是一片空白，對於一個網站工程師，當然是先按F12，看看究竟發生了甚麼事。
原來是因為IE11並不支援ES6的語法，像是這邊就必須寫成function型式，且箭頭函式也不支援，如果全部都要改，可能又要個2、3天了，所以我就上網找了些資料，主要是利用Babel，他會將程式碼ES6的部分轉譯成ES5，讓IE11看得懂，以下為解法。
一、先在Vue.js引入前 引入下面兩支JS
<script src="https://cdn.bootcss.com/babelpolyfill/7.6.0/polyfill.min.js"></script><script src="https://cdn.bootcss.com/babelstandalone/6.26.0/babel.min.js"></script>
二、將自己寫的JS，加入type=”text/babel”
Vuetify
透過上面方法，的確能讓IE11執行ES6，但我發現我的網頁還是白的QQ，就是某個環節還是出錯了，且F12裡面甚麼錯誤都沒講...，只好慢慢一行一行刪掉，看式哪一行程式在搞怪，最後發現問題是出在 Vuetify 的data-table組件，其中有一段
<template v-slot:item.action="{item}"><v-icon smallclass="mr-2"@@click="editData(item)":disabled="editState">mdi-pencil</v-icon><v-icon small@@click="deleteData(item)"v-if="user.ReadOnly!='1'":disabled="editState">mdi-delete</v-icon></template>
寫自定意義按鈕會用到的程式，在IE11會出問題，
將之修改為
<template v-slot:item.action="item">把{}拿掉，
並在自己撰寫的方法中，修改item即可取得該筆資料。
結論:前端要改的部分主要分為兩段，分別為JS與HTML部分，JS部分可以選擇一項一項將ES6寫法改為ES5寫法，或直接套用Babel。
HTML部分也必須將部分內嵌的程式碼進行修改，如{on}，這是ES6才有的語法糖，因此IE11就無法編譯，
<template v-slot:item.action={item}>改成寫完整ES5語法
<template v-slot:item.action={'item':item}>
再者IE11對於HTML的標籤撰寫相比Chrome來說相當嚴格?，只要有標籤缺少將導致渲染失敗或跑版，(有種當初JS學完去學C#的感覺，不愧是微軟爸爸出品的)所以需要檢查HTML有沒有少結束標籤，可以到HTMLLHint這個網站處理，就不用一行一行自己慢慢看，他會幫你檢查出來!!
