简介

在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-builder
             appId: "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-builder
                appId: "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')

export function getSystem() {
  //这是mac系统
  if (process.platform == "darwin") {
    return 1;
  }
  //这是windows系统
  if (process.platform == "win32") {
    return 2;
  }
  //这是linux系统
  if (process.platform == "linux") {
    return 3;
  }
}
/**
 *
 * @returns 获取安装路径
 */
export function getExePath() {
  // return path.dirname("C:");
  return path.dirname(electron.remote.app.getPath("exe"));
}
/**
 *
 * @returns 获取配置文件路径
 */
export function getConfigPath() {
  if (getSystem() === 1) {
    return getExePath() + "/config.json";
  } else {
    return getExePath() + "\\config.json";
  }
}
/**
 * 读取配置文件
 */
export function readConfig() {
  return new Promise((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') {
  (async function () {
    const res = await readConfig()
    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",

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