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