简介
在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",
这就是这篇文章的主要内容了，如果这篇文章对你有帮助，记得留下你的点赞了，谢谢啦~~