electron框架的自定义外部配置文件的配置与读取

简介

在vue2.6版本后，会生成vue.config.js文件，本文章主要讲解如何在vue中，如何生成electron的外部配置文件，与如何读取外部配置文件。

一、配置与生成config.json文件

首先，要在项目下新建一个config.json文件，然后再config文件中，写入一些信息。

然后在vue.config.js中写入配置，通知electron在打包时，不要将指定文件打包进app.asar中。

pluginOptions:{electronBuilder:{builderOptions:{// build配置在此处// options placed here will be merged with default configuration and passed to electron-builderappId:"com.emr.app",extraResources:[{"from":"./config.json","to":"../"}],"mac":{"icon":"./public/favicon.icns"},"win":{"icon":"./public/favicon.ico"}// 配置打包后，在win下的应用图标。ico图片至少要是256*256尺寸的，尺寸太小，会打包失败。}},},

这里附上我的vue.config.js文件的配置，方便大家理解

const webpack =require('webpack')

module.exports ={lintOnSave:false,publicPath:"./",// PC端适配代码// css: {//   loaderOptions: {//     css: {},//     postcss: {//       plugins: [//         require("postcss-px2rem")({//           remUnit: 192,  // 以1920屏幕为标准来缩放网页//           propList: ['*', '!border', '!font-size'],  // border属性不进行适配//         })//       ]//     }//   }// },chainWebpack:config=>{
        config.plugin('provide').use(webpack.ProvidePlugin,[{$:'jquery',jquery:'jquery',jQuery:'jquery','window.jQuery':'jquery'}])},configureWebpack:{resolve:{alias:{}}},pluginOptions:{electronBuilder:{builderOptions:{// build配置在此处// options placed here will be merged with default configuration and passed to electron-builderappId:"com.emr.app",extraResources:[{"from":"./config.json","to":"../"},{"from":"./MatchDownloader.exe","to":"../"},{"from":"./download.bat","to":"../"},],"mac":{"icon":"./public/favicon.icns"},"win":{"icon":"./public/favicon.ico"}}},},// 代理/* devServer: {
      port: 8080,
      // host: 'localhost',
      https: false, // https:{type:Boolean}
      open: true, // 配置自动启动浏览器
      disableHostCheck: true,
        "proxy": {
        "/*": {
            "target": "http://xxx",
            "changeOrigin": true
        }
      }
    }, */}

然后，在执行npm run electron:build命令后，就可以在打包后的文件里看到config.json文件被独立出来了。

至此，就完成了第一步，配置与生成config.json这个外部配置文件了。

二、读取外部配置文件 ---- config.json

至此，我们已经有了config.json这个外部配置文件，要读取这个文件的配置信息，就要用到electron的remote模块，这个模块不同electron版本的获取方式不同，这个用了是electron13.0.0的获取方法。

首先，新建一个getBaseUrl.js文件

const path = window.require && window.require("path");const fs = window.require && window.require("fs");const electron = window.require && window.require('electron')exportfunctiongetSystem(){//这是mac系统if(process.platform =="darwin"){return1;}//这是windows系统if(process.platform =="win32"){return2;}//这是linux系统if(process.platform =="linux"){return3;}}/**
 *
 * @returns 获取安装路径
 */exportfunctiongetExePath(){// return path.dirname("C:");return path.dirname(electron.remote.app.getPath("exe"));}/**
 *
 * @returns 获取配置文件路径
 */exportfunctiongetConfigPath(){if(getSystem()===1){returngetExePath()+"/config.json";}else{returngetExePath()+"\\config.json";}}/**
 * 读取配置文件
 */exportfunctionreadConfig(){returnnewPromise((res, rej)=>{
    console.log("fs", fs)
    fs.readFile(getConfigPath(),"utf-8",(err, data)=>{let config =""if(data){//有值
        config =JSON.parse(data)}res(config)})})}

这个文件的readConfig函数，就是获取config文件的函数。所以外部只要调用这个readConfig函数，就可以获取外部配置文件的信息了。

例如：

import{ readConfig }from'@/utils/getBaseUrl.js'let applicationType ='website'// 如果最后打包的是网站，就打开这个// let applicationType = "exe"  // 如果最后打包的是exe应用，就打开这个if(applicationType ==='exe'){(asyncfunction(){const res =awaitreadConfig()
    axios.defaults.baseURL = res.baseUrl
    Vue.prototype.$baseURL = res.baseUrl
    window.$config = res
  })()}// 因为我原来的项目是可以打包成网站与桌面应用，但是网站的window.require('electron')返回的是undefined，所以这里才会用applicationType来区分，如果打包后的是exe应用时，才去读取安装目录下的config.json文件

最后

这篇文章就讲这个外部配置文件的生成与获取，如果大家有兴趣的话，会找个时间分享一下，electron的桌面的版本更新下载的功能，就像其他桌面应用一样，点击更新按钮，自动下载与更新应用的功能。
附上我当前项目的vue与electron版本

"vue":"^2.6.11","electron":"^13.0.0","electron-packager":"^15.4.0",

这就是这篇文章的主要内容了，如果这篇文章对你有帮助，记得留下你的点赞了，谢谢啦~~