1，二維碼的生成（其中一個生成方法），由伺服器提供一個url, 後端提供一個url,兩個url拼接到一個img標籤內，如圖：

            <el-row>
                <el-col :span="11">
                    <el-form-item label="租床二維碼：">
                        <a :href="cabinetErCode" target="_blank">
                            <img :src="cabinetErCode">//src內的是呼叫的計算屬性computed的，注意這個不是方法所以沒有小括號。
                        </a>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="加群二維碼：">
                        <a :href="groupQrCode" target="_blank">
                            <img :src="groupQrCode">
                        </a>
                    </el-form-item>
                </el-col>
            </el-row>
 

    2.script程式碼

<script>
export default {
    data() {
        return {
            form: {},
            productionUrl: process.env.VUE_APP_PRODUCTION_SRC,.//process.env是呼叫配置檔案裡變數的方法，相當於呼叫dana裡的變數用this一樣。這裡productionUrl是定義配置檔案裡變數的。下同
            developmentUrl: process.env.VUE_APP_DEVELOPMENT_SRC,
        }
    },
    props: ["id"],
    created() {
        this.loadMsg()
    },
    watch: {
        'id': {
            handler() {
                this.loadMsg();
            }
        }
    },
    computed: {
        cabinetErCode() {//計算屬性裡的小括號不需要填引數的
            return this.productionUrl + this.developmentUrl + "?cabinet_no=" + this.form.cabinet_no + "&action=cabinet"//這是計算櫃子二維碼的整個url其中this.form.cabinet_no是傳的引數。
        },
        groupQrCode() {
            return this.productionUrl + this.developmentUrl + "?cabinet_no=" + this.form.cabinet_no + "&action=group"
        }
    },
 

3.配置檔案裡：

NODE_ENV='development'
VUE_APP_CURRENTMODE='development'
VUE_APP_SITE_TITLE='益祝後臺管理系統'
VUE_APP_API_URL='http://api.yz.gydsh.com/msweb'
VUE_APP_PRODUCTION_SRC='https://s.weflys.com/qrcode?size=100&url=' //定義的伺服器給的url
VUE_APP_DEVELOPMENT_SRC='http://api.yz.gydsh.com/app/cabinet/scan/qr' //定義的後端給的url的前半部分
 

4，伺服器給的url: https://s.weflys.com/qrcode?size=200&url={url} 其中大括號裡的url填後端給的url，size=200是生成二維碼的大小可修改。

後端給的url： http://api.yz.gydsh.com/app/cabinet/scan/qr?cabinet_no=123&action=cabinet 其中123是