近年來，Vue.js在前端界的熱度越來越高，越來越多的開發者將目光投向了這個優秀的框架。然而，在使用Vue開發過程中，有些開發者可能會遇到一些問題，例如今天我們說一個比較常見的問題——Vue看不了二維碼的情況。
一、問題現象
透過Vue.js開發的頁面，使用微信或其他APP內建瀏覽器，開啟頁面後，無法正常辨識並掃描二維碼，或說二維碼無法正常顯示。
二、問題分析
1.瀏覽器限制
首先，我們需要明確一點，二維碼可以被瀏覽器正確地解析，但是因為瀏覽器默認限制了存取本機文件，所以在Vue.js開發環境下，我們會看到二維碼顯示不出來的情況。
2.二維碼圖片轉換成base64
解決方案是將二維碼圖片轉換成base64，作為一個dataURL，然後將其直接渲染到HTML中。
三、問題解決
1.透過URL引入圖片
rrreee#在Vue.js專案中，使用URL引入圖片的方法如上。
2.透過dataURL引入圖片
在專案中引用Base64格式的圖片，可以使用background-image引入。
<img :src="qrcodeUrl">
需要使用canvas將二維碼轉換成DataURL。
<div :style="{ backgroundImage: 'url(' + qrcodeBase64 + ')'}"></div>3.將Base64編碼後的圖片輸出到HTML中
import QRCode from 'qrcode';
// 获取二维码的DataURL
QRCode.toDataURL(url, (err, dataUrl) => {
if(!err) {
this.qrcodeBase64 = dataUrl;
}
})四、總結
在Vue.js開發中如果遇到不能辨識二維碼的情況，我們需要在程式碼中進行Base64的處理，將二維碼圖片轉換成DataURL後輸出到HTML中，以此來解決這個問題。此外，在Vue.js開發中我們也要隨時注意瀏覽器對應用程式的限制，以防止其他問題。
以上是vue看不了二維碼怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！
