近來有幸被安排實現一個生成二維碼預覽的功能，個人感覺挺好玩，就欣然接受了。首先百度了下，發現vue中生成二維碼的外掛還不少呢，用的比較火的，有這麼兩個外掛 vue-qart 和 vue-qr ，對比了下，感覺vue-qr的功能實現起來更加簡單豐富，所以選擇了vue-qr。本人是vue小白，記錄下實現過程和遇到的深坑。

效果圖如下：

因為是外掛，所以實現起來還是比較簡單的，固定的套路。

1.install with NPM

npm install vue-qr --save

2.在對應的模組中 Import 進vueQr元件 

import VueQr from 'vue-qr'

export default {
    components: { VueQr },
}
 

3.In template

<vue-qr :bgSrc='config.logo' :logoSrc="config.logo" :text="config.value" :size="200"></vue-qr>

4. 在data中配置

data() {
    return {
        config: {
          value: 'www.baidu.com',//顯示的值、跳轉的地址
          imagePath: require('../assets/logo.png')//中間logo的地址
        }
    }
}
 

5.成了。啟動執行，瀏覽器檢視效果即可。

為了方便 有需要的朋友，貼上二維碼元件的全部程式碼如下：

<!--  -->
<template>
    <div>
      <h3>二維碼生成元件</h3>
        <!-- <vue-qr  :logoSrc="config.logo" :text="config.value" :size="200" :margin="0"></vue-qr> -->
        <vue-qr style="float:left;margin-left:200px;" :bgSrc='config.imagePath' :text="config.value" :size="200" :margin="0"></vue-qr>
        <vue-qr style="float:left;margin-left:200px;" :logoSrc="config.imagePath" :text="config.value" :size="200" :margin="0"></vue-qr>
        <vue-qr style="float:left;margin-left:200px;" :bgSrc='config.imagePath' :logoSrc="config.imagePath" :text="config.value" :size="200" :margin="0"></vue-qr>
    </div>
        
</template>

<script>
import VueQr from 'vue-qr'

export default {
  components: { VueQr },
  data() {
    return {
        config: {
          value: 'www.baidu.com',//顯示的值、跳轉的地址
          imagePath: require('../assets/logo.png')//中間logo的地址
        }
    }
  },
  computed: {},

  //事件（鉤子）回撥函式：
  //元件建立之後，資料已經完成初始化，但是DOM還未生成
  created() {},

  //資料裝載DOM上後，各種資料已經就位，將資料渲染到DOM上，DOM已經完成
  mounted() {},

  methods: {}
}
</script>
<style scoped>
</style>
 

好了，實現過程看起來貌似很簡單，其實並沒有想得那麼簡單。記錄下爬過的深坑，還是關於二維碼生成的問題。

問題1：啟動報錯，找不見logo.png 這種情況，處理方式，在專案根路徑下重新執行一遍npm install 。如果還不行，就先把圖片引用的程式碼註釋掉，這樣應該就可以正常啟動了。

問題2：不報錯，但是二維碼就是不顯示。這種應該是最讓人頭疼的了，連個報錯都沒有，簡直是無從下手啊。這時，建議你試試把<vue-qr>中圖片引用的相關程式碼先刪掉，只保留:text，如下

<vue-qr :text="config.value" :size="200" :margin="0"></vue-qr>

這時應該是可以顯示一個二維碼的，但是沒有logo和背景。

“帶上圖片就什麼不顯示也不報錯，不帶圖片就可以顯示二維碼” ，那好辦啊，不要圖片了，湊合能用就行。

如果一開始就沒有圖片，也就湊合用了，但是見過好的，就說明可以實現，肯定還是哪裡有問題。百度了好久，偶然發現了點小問題，在第4步，我最初的寫法如下：

data() {
    return {
        config: {
          value: 'www.baidu.com',//顯示的值、跳轉的地址
          imagePath: '../assets/alogo.png'//中間logo的地址
        }
    }
  },

細心的童鞋應該已經發現了，imagePath後面的路徑少了require的包裹。加上之後，懷著激動的心情，切出了瀏覽器，帶logo和背景的二維碼出來了。

本人非前端工程師，只是近期前端進度偏慢，被領導拉去幫忙的，所以對於引用圖片路徑為什麼要加require還沒有深入見解，歡迎前端大牛指教。

現在vue越來越火，但網上關於vue實現二維碼的報錯的問題總結，帖子少的可憐，所以感覺有必要記錄下，幫助到有需要的朋友。

vue玩了兩週多了，感覺從最初的很暈很不適應，到現在覺得，越來越靈活，越來越好玩。用vue開發還挺爽的！