electron加载本地图片-打包处理字符集问题-vue项目改electron

冷不防 2022-12-30 10:50 240阅读 0赞

# 安装 #

静态文件在build里面注意

npm i -g electron

注意事项正常无法安装在中国需要配置源地址

npm config set registry https://registry.npm.taobao.org
      npm config set disturl https://registry.npm.taobao.org
      npm config set electron_mirror http://npm.taobao.org/mirrors/electron/

下载完毕注释或者恢复之前的配置 我的地址如下根据自己的路径进行修改  
C:\\Users\\技术部.npmrc  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVUVTS1lIT1NU_size_16_color_FFFFFF_t_70]

# vue项目改electron #

vue add electron-builder

**红色圈起来的是自动添加的命令**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVUVTS1lIT1NU_size_16_color_FFFFFF_t_70 1]

## 运行命令 ##

npm run electron:serve

如果 提示 Failed to fetch extension, trying 3 more times 可以不用管，他是在下载Vue Devtools 国内无法下载默认不用管一会就好  
![在这里插入图片描述][20201225100754380.png]  
如果想修复这个可以在代码注释下载这块内容  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVUVTS1lIT1NU_size_16_color_FFFFFF_t_70 2]

# 打包处理字符集问题 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVUVTS1lIT1NU_size_16_color_FFFFFF_t_70 3]  
**修改这个文件**

*  \*\*/node\_modules/app-builder-lib/out/targets/nsis/NsisTarget.js

async executeMakensis(defines, commands, script) { 
        const args = this.options.warningsAsErrors === false ? [] : ["-WX"];
        //添加这个
      args.push("-INPUTCHARSET", "UTF8");
        for (const name of Object.keys(defines)) { 
          const value = defines[name];
    
          if (value == null) { 
            args.push(`-D${ name}`);
          } else { 
            args.push(`-D${ name}=${ value}`);
          }
        }
    
        for (const name of Object.keys(commands)) { 
          const value = commands[name];
    
          if (Array.isArray(value)) { 
            for (const c of value) { 
              args.push(`-X${ name} ${ c}`);
            }
          } else { 
            args.push(`-X${ name} ${ value}`);
          }
        }
    
        args.push("-");
    
        if (this.packager.debugLogger.isEnabled) { 
          this.packager.debugLogger.add("nsis.script", script);
        }
    
        const nsisPath = await (0, _nsisUtil().NSIS_PATH)();
        const command = path.join(nsisPath, process.platform === "darwin" ? "mac" : process.platform === "win32" ? "Bin" : "linux", process.platform === "win32" ? "makensis.exe" : "makensis"); // if (process.platform === "win32") { 
        // fix for an issue caused by virus scanners, locking the file during write
        // https://github.com/electron-userland/electron-builder/issues/5005
    
        await ensureNotBusy(commands["OutFile"].replace(/"/g, "")); // }
    
        await (0, _builderUtil().spawnAndWrite)(command, args, script, { 
          // we use NSIS_CONFIG_CONST_DATA_PATH=no to build makensis on Linux, but in any case it doesn't use stubs as MacOS/Windows version, so, we explicitly set NSISDIR
          env: {  ...process.env,
            NSISDIR: nsisPath
          },
          cwd: _nsisUtil().nsisTemplatesDir
        });
      }

## vue.config.js ##

module.exports = { 
      // publicPath: '/web/'
       publicPath: '/',
       pluginOptions: { 
           electronBuilder: { 
             builderOptions: { 
               // options placed here will be merged with default configuration and passed to electron-builder
    			win:{ 
    				target:'nsis',
    				icon: "build/icon.ico"
    			},
    			nsis:{ 
    				oneClick:false,//不一键安装
    				allowToChangeInstallationDirectory :true,//是否可以自定义安装目录
    				createDesktopShortcut: true,
    				installerIcon: "build/icon.ico",
    				    // 卸载图标
    				uninstallDisplayName:"吞吐行",
    				shortcutName:"吞吐行工具",
    				uninstallerIcon:"build/icon.ico"
    			}
    		 }
           }
         }
    }

## 导入 exe文件 ##

在vue.config.js builderOptions 添加参数

extraResources: [
       		  { 
       		    "from": "./build/llt-publish-tool.exe",
       		    "to": "./llt-publish-tool.exe"
       		  }
       		],

## 加载本地图片 ##

**这个文件 /src/background.js 添加如下代码**

app.whenReady().then(() => { 
       protocol.interceptFileProtocol('file', (req, callback) => { 
           let url = req.url.substr(8);
    
       	let twoUrl =  url.replace(/\//g, "\\");//这里用来处理反斜杠问题
       	console.log(twoUrl);
       	callback(decodeURI(twoUrl))
    
         }, (error) => { 
           if (error) { 
             console.error('Failed to register protocol');
           }
         });
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVUVTS1lIT1NU_size_16_color_FFFFFF_t_70]: /images/20221120/c0fdbd8efb5846d6850f4ff0e5f0a0aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVUVTS1lIT1NU_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201225100613680.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVUVTS1lIT1NU,size_16,color_FFFFFF,t_70
[20201225100754380.png]: https://img-blog.csdnimg.cn/20201225100754380.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVUVTS1lIT1NU_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020122510092775.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVUVTS1lIT1NU,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVUVTS1lIT1NU_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201228151814888.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVUVTS1lIT1NU,size_16,color_FFFFFF,t_70