Vue Electron中自定义环境变量的配置与使用方法

嘿，我来帮你搞定Vue+Electron项目里的自定义环境变量配置！没错，你确实需要在项目根目录创建.env相关文件来存储API密钥这类敏感信息，下面是一步步的实操指南：

在项目根目录下创建对应环境的配置文件，常用的有这几个：

• .env：所有环境通用的变量
• .env.development：开发环境专属变量
• .env.production：生产环境专属变量
• .env.staging（可选）：测试/预发布环境变量

在这些文件里，变量命名必须以VUE_APP_开头（Vue CLI默认只识别这个前缀的变量），比如：

# .env.development
VUE_APP_API_KEY=your_dev_api_key_here
VUE_APP_BASE_URL=http://dev.example.com/api

在Vue组件、页面或者其他前端代码里，可以直接通过process.env访问这些变量：

// 比如在Vue组件中
export default {
  created() {
    console.log('当前环境API密钥:', process.env.VUE_APP_API_KEY)
    console.log('接口基础地址:', process.env.VUE_APP_BASE_URL)
  }
}

Electron主进程默认无法直接读取Vue注入的环境变量，需要额外处理，这里有两种常用方式：

方式1：用dotenv包加载 #

1. 先安装依赖：

npm install dotenv --save-dev

2. 在主进程入口文件（通常是src/background.js或main.js）顶部添加以下代码：

require('dotenv').config()

// 现在就能在主进程里访问变量了
console.log('主进程中的API密钥:', process.env.VUE_APP_API_KEY)

方式2：通过Vue CLI插件配置注入 #

如果你用的是vue-cli-plugin-electron-builder，可以在vue.config.js里直接把环境变量传递给主进程：

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  pluginOptions: {
    electronBuilder: {
      // 开启node集成，确保主进程能访问process.env
      nodeIntegration: true,
      // 把环境变量注入主进程
      env: {
        VUE_APP_API_KEY: process.env.VUE_APP_API_KEY,
        VUE_APP_BASE_URL: process.env.VUE_APP_BASE_URL
      }
    }
  }
})

• 一定要保护敏感文件：把.env、.env.local、.env.*.local添加到.gitignore里，绝对不能把包含密钥的文件提交到代码仓库！

  # .gitignore示例
  .env
  .env.local
  .env.development.local
  .env.production.local
  

• 生产环境打包注意：打包时环境变量会被静态替换到代码中，所以打包前要确保使用的是正确的生产环境配置文件（.env.production）。
• 自定义环境启动：如果需要切换到测试环境，创建.env.staging后，执行npm run serve --mode staging就能加载这个环境的变量了。

内容的提问来源于stack exchange，提问作者newbiedev