vue3+ts使用二维码功能

1、下载依赖包。

npm install vue-qr --save

2、在main.ts文件中全局引入。

// 二维码
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
app.component('vueQr', vueQr)

3、在页面中使用。

<vue-qr id="payQR":text="codeText":logoSrc="logoSrc":size="qrCodeWidth" colorDark="#5559FF" colorLight="#ffffff">
</vue-qr>// 二维码
const codeText=ref('111')
const logoSrc = require('../../../assets/logo/logo.png')
const qrCodeWidth = ref(450)

注：logoSrc必须用require包裹，不然报错，二维码加载不出来。

遇到报错ReferenceError: require is not defined。是因为使用Vite做为开发构建工具，而Vite默认不支持使用require方式进行模块导入导出。
解决：使用vite-plugin-require-transform插件。

安装依赖包

npm install vite-plugin-require-transform

在vite.config.js文件中添加如下代码。

import requireTransform from "vite-plugin-require-transform";
plugins: [requireTransform({fileRegex: /.js$|.vue$/,})
]

因为我使用的是ruoyi框架，最后修改如下：

plugins: [createPlugins(env, command === 'build'),requireTransform({fileRegex: /.js$|.vue$/,}),
]