修复没有logo不生成图片问题

src/views/shop/exchange/index.vue

@@ -94,9 +94,9 @@ export default {
             // let urlCode = `http://192.168.0.151:8988/TFShop_Uni_H5/#/another-tf/another-user/exchange/index?shopId=${shopId}&shopName=${this.codeInfo.shopName}`
 
             let urlCode = ""
-            console.log(process.env.NODE_ENV);
             if(process.env.NODE_ENV == "production"){
                 urlCode = `https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/exchange/index?shopId=${shopId}&shopName=${this.codeInfo.shopName}`
+                // urlCode = `https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/exchange/index?shopId=491&shopName=测试小店`
             }else{
                 urlCode = `https://test.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/exchange/index?shopId=${shopId}&shopName=${this.codeInfo.shopName}`
             }
@@ -111,10 +111,12 @@ export default {
             const ctx = qrCodeCanvas.getContext('2d');
             const logo = new Image();
             //  本地头像
-            logo.src = this.shopLogo;
+            logo.src = this.shopLogo || 'https://jufeng-shop-1317254189.cos.ap-guangzhou.myqcloud.com/1722073118502-微信图片_20230511154105.jpg';
             //  解决跨域 重要
             logo.setAttribute('crossOrigin', 'anonymous');
+            console.log(logo);
             logo.onload = () => {
+                console.log("进来2");
                 const logoSize = qrCodeCanvas.width * 0.26; // 根据需要调整logo尺寸
                 const logoX = (qrCodeCanvas.width - logoSize) / 2;
                 const logoY = (qrCodeCanvas.height - logoSize) / 2;
@@ -145,7 +147,9 @@ export default {
                 width: this.$refs.businessCardCanvas?.offsetWidth,
                 height: this.$refs.businessCardCanvas?.offsetHeight
             }).then((canvas) => {
+                console.log("执行到这里了9999");
                 this.canvasImg = canvas.toDataURL('image/png');
+                // console.log(this.canvasImg)
                 this.srcList.push(this.canvasImg)
             }).catch(() => {
                 console.log("生成图片错误");

vue.config.js

@@ -1,18 +1,18 @@
-const path = require('path')
-const defaultSettings = require('./src/settings.js')
+const path = require("path");
+const defaultSettings = require("./src/settings.js");
 
 function resolve(dir) {
-  return path.join(__dirname, dir)
+  return path.join(__dirname, dir);
 }
 
-const name = defaultSettings.title || 'vue Admin Template' // page title
+const name = defaultSettings.title || "vue Admin Template"; // page title
 
 // If your port is set to 80,
 // use administrator privileges to execute the command line.
 // For example, Mac: sudo npm run
 // You can change the port by the following methods:
 // port = 9528 npm run dev OR npm run dev --port = 9528
-const port = process.env.port || process.env.npm_config_port || 9529 // dev port
+const port = process.env.port || process.env.npm_config_port || 9529; // dev port
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
@@ -25,9 +25,9 @@ module.exports = {
    */
 
   runtimeCompiler: true,
-  publicPath: './',
-  outputDir: 'dist',
-  assetsDir: 'static',
+  publicPath: "./",
+  outputDir: "dist",
+  assetsDir: "static",
   // lintOnSave: process.env.NODE_ENV === 'development',
   lintOnSave: false,
   productionSourceMap: false,
@@ -36,28 +36,28 @@ module.exports = {
     open: true,
     overlay: {
       warnings: false,
-      errors: false
+      errors: false,
     },
     proxy: {
-      '/businessapi': {
+      "/businessapi": {
         // target: 'http://192.168.0.91:9104',
-        target: 'https://nsbusinessapitest.tuanfengkeji.cn',
+        target: "https://nsbusinessapitest.tuanfengkeji.cn",
         // target: 'https://nsbusinessapi.tuanfengkeji.cn',
         changeOrigin: true,
         pathRewrite: {
-          '^/businessapi': ''
-        }
+          "^/businessapi": "",
+        },
       },
-      '/canvasApi': {
+      "/canvasApi": {
         // target: 'http://192.168.0.91:9104', // 测试
-        target: 'https://nsbusinessapitest.tuanfengkeji.cn',
+        target: "https://nsbusinessapitest.tuanfengkeji.cn",
         // target: 'https://nsbusinessapi.tuanfengkeji.cn',
         changeOrigin: true,
         pathRewrite: {
-          '^/canvasApi': ''
-        }
-      }
-    }
+          "^/canvasApi": "",
+        },
+      },
+    },
   },
   configureWebpack: {
     // provide the app's title in webpack's name field, so that
@@ -65,33 +65,45 @@ module.exports = {
     name,
     resolve: {
       alias: {
-        '@': resolve('src'),
-        '@@': resolve('canvas-container')
-      }
-    }
+        "@": resolve("src"),
+        "@@": resolve("canvas-container"),
+      },
+    },
   },
   // 配置全局样式变量
   css: {
     loaderOptions: {
       sass: {
-        prependData: `@import "canvas-container/styles/index.scss";`
-      }
-    }
+        prependData: `@import "canvas-container/styles/index.scss";`,
+      },
+    },
   },
   // 配置多页面入口
   pages: {
     index: {
-      entry: 'src/main.js',
-      template: 'public/index.html',
-      filename: 'index.html',
-      chunks: ['chunk-elementUI', 'chunk-vendors', 'chunk-libs', 'runtime', 'index']
+      entry: "src/main.js",
+      template: "public/index.html",
+      filename: "index.html",
+      chunks: [
+        "chunk-elementUI",
+        "chunk-vendors",
+        "chunk-libs",
+        "runtime",
+        "index",
+      ],
     },
     canvas: {
-      entry: 'canvas-container/main.js',
-      template: 'public/canvas.html',
-      filename: 'canvas.html',
-      chunks: ['chunk-elementUI', 'chunk-vendors', 'chunk-libs', 'runtime', 'canvas']
-    }
+      entry: "canvas-container/main.js",
+      template: "public/canvas.html",
+      filename: "canvas.html",
+      chunks: [
+        "chunk-elementUI",
+        "chunk-vendors",
+        "chunk-libs",
+        "runtime",
+        "canvas",
+      ],
+    },
   },
   chainWebpack(config) {
     // it can improve the speed of the first screen, it is recommended to turn on preload
@@ -106,64 +118,58 @@ module.exports = {
     // ])
 
     // when there are many pages, it will cause too many meaningless requests
-    config.plugins.delete('prefetch')
+    config.plugins.delete("prefetch");
 
     // set svg-sprite-loader
+    config.module.rule("svg").exclude.add(resolve("src/icons")).end();
     config.module
-      .rule('svg')
-      .exclude.add(resolve('src/icons'))
-      .end()
-    config.module
-      .rule('icons')
+      .rule("icons")
       .test(/\.svg$/)
-      .include.add(resolve('src/icons'))
+      .include.add(resolve("src/icons"))
       .end()
-      .use('svg-sprite-loader')
-      .loader('svg-sprite-loader')
+      .use("svg-sprite-loader")
+      .loader("svg-sprite-loader")
       .options({
-        symbolId: 'icon-[name]'
+        symbolId: "icon-[name]",
       })
-      .end()
+      .end();
 
-    config
-      .when(
-        process.env.NODE_ENV !== 'development',
-        (config) => {
-          config
-            .plugin('ScriptExtHtmlWebpackPlugin')
-            .after('html')
-            .use('script-ext-html-webpack-plugin', [ {
-              // `runtime` must same as runtimeChunk name. default is `runtime`
-              inline: /runtime\..*\.js$/
-            } ])
-            .end()
-          config
-            .optimization.splitChunks({
-              chunks: 'all',
-              cacheGroups: {
-                libs: {
-                  name: 'chunk-libs',
-                  test: /[\\/]node_modules[\\/]/,
-                  priority: 10,
-                  chunks: 'initial' // only package third parties that are initially dependent
-                },
-                elementUI: {
-                  name: 'chunk-elementUI', // split elementUI into a single package
-                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-                },
-                commons: {
-                  name: 'chunk-commons',
-                  test: resolve('src/components'), // can customize your rules
-                  minChunks: 3, //  minimum common number
-                  priority: 5,
-                  reuseExistingChunk: true
-                }
-              }
-            })
-          // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
-          config.optimization.runtimeChunk('single')
-        }
-      )
-  }
-}
+    config.when(process.env.NODE_ENV !== "development", (config) => {
+      config
+        .plugin("ScriptExtHtmlWebpackPlugin")
+        .after("html")
+        .use("script-ext-html-webpack-plugin", [
+          {
+            // `runtime` must same as runtimeChunk name. default is `runtime`
+            inline: /runtime\..*\.js$/,
+          },
+        ])
+        .end();
+      config.optimization.splitChunks({
+        chunks: "all",
+        cacheGroups: {
+          libs: {
+            name: "chunk-libs",
+            test: /[\\/]node_modules[\\/]/,
+            priority: 10,
+            chunks: "initial", // only package third parties that are initially dependent
+          },
+          elementUI: {
+            name: "chunk-elementUI", // split elementUI into a single package
+            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+            test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
+          },
+          commons: {
+            name: "chunk-commons",
+            test: resolve("src/components"), // can customize your rules
+            minChunks: 3, //  minimum common number
+            priority: 5,
+            reuseExistingChunk: true,
+          },
+        },
+      });
+      // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
+      config.optimization.runtimeChunk("single");
+    });
+  },
+};