electron-vite环境变量设置

在electron.vite.config.js/ts 同级添加env目录

在env目录下添加文件.env.development

M_VITE_ELECTRON_NAME = '主染进程名称-开发环境'
R_VITE_ELECTRON_NAME = '渲染进程名称-开发环境'

在env目录下添加文件.env.bate

M_VITE_ELECTRON_NAME = '主染进程名称-测试环境'
R_VITE_ELECTRON_NAME = '渲染进程名称-测试环境'

在env目录下添加文件.env.production

M_VITE_ELECTRON_NAME = '主染进程名称-生产环境'
R_VITE_ELECTRON_NAME = '渲染进程名称-生产环境'

修改package.json中的scripts

  "scripts": {
     ...
    "dev": "electron-vite dev --watch --mode development",
    "dev:test": "electron-vite dev --watch --mode bate",
    "dev:prod": "electron-vite dev --watch  --mode production",

    "build:dev:win": "npm run build --mode development && electron-builder --win",
    "build:dev:mac": "npm run build --mode development && electron-builder --mac",
    "build:dev:linux": "npm run build --mode development && electron-builder --linux",

    "build:bate:win": "npm run build --mode bate && electron-builder --win",
    "build:bate:mac": "npm run build --mode bate && electron-builder --mac",
    "build:bate:linux": "npm run build --mode bate && electron-builder --linux",

    "build:prod:win": "npm run build --mode production && electron-builder --win",
    "build:prod:mac": "npm run build --mode production && electron-builder --mac",
    "build:prod:linux": "npm run build --mode production && electron-builder --linux",
    ...
  }

• 说明：
  • dev：开发环境
  • dev:test：测试环境
  • dev:prod：生产环境
  • build:dev:win：开发环境- windows 平台
  • build:dev:mac：开发环境- mac 平台
  • build:dev:linux：开发环境- linux 平台
  • build:bate:win：测试环境- windows 平台
  • build:bate:mac：测试环境- mac 平台
  • build:bate:linux：测试环境- linux 平台
  • build:prod:win：生产环境- windows 平台
  • build:prod:mac：生产环境- mac 平台
  • build:prod:linux：生产环境- linux 平台

• scripts命令过多 可以通过脚本控制 这儿就不做演示了

修改electron.vite.config.mjs 中的环境变量

• 在electron.vite.config.mjs 中添加如下代码

import { resolve } from "path";
import { defineConfig, externalizeDepsPlugin } from "electron-vite";

import vue from "@vitejs/plugin-vue";
const envDir = resolve("env");
export default defineConfig({
  main: {
    envPrefix: "M_VITE_",
    envDir,
    plugins: [externalizeDepsPlugin()],
  },
  preload: {
    plugins: [externalizeDepsPlugin()],
  },
  renderer: {
    envPrefix: "R_VITE_",
    envDir,
    plugins: [vue()],
  },
});

在主进程中使用环境变量

const MElectronName = import.meta.env.M_VITE_ELECTRON_NAME;

在渲染进程中使用环境变量

const RElectronName = import.meta.env.R_VITE_ELECTRON_NAME;