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

安装

静态文件在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

vue项目改electron

 vue add electron-builder

红色圈起来的是自动添加的命令

运行命令

 npm run electron:serve

如果 提示 Failed to fetch extension, trying 3 more times 可以不用管，他是在下载Vue Devtools 国内无法下载默认不用管一会就好

如果想修复这个可以在代码注释下载这块内容

打包处理字符集问题

修改这个文件

• **/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');
       }
     });
})