超详细！！！electron-vite-vue开发桌面应用之环境变量配置（十一）

云风网
云风笔记
云风知识库

在开发项目时，我们一般需要搭建不同环境下的配置参数，通过环境变量来区分是在构建正式环境还是开发环境。Vite使用.env文件来定义环境变量，并且可以通过.env.local、.env.[mode]和.env.[mode].local文件来对不同环境进行配置。

一、新建环境声明文件.env

根目录创建环境配置文件

.env.development表示开发环境配置

# 页面标题
VITE_APP_TITLE = 云风知识库
# 开发环境配置
VITE_APP_ENV = 'development'
VITE_APP_BASE_API = '/stage-api'
# 是否启用代理
VITE_HTTP_PROXY = false
# 端口
VITE_PORT = 80
#开发环境接口地址
VITE_SERVE = 'http://www.applefv.com'
# 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip

.env.production表示正式环境配置

# 页面标题
VITE_APP_TITLE = 云风笔记
# 生产环境配置
VITE_APP_ENV = 'production'

VITE_APP_BASE_API = '/'
# 是否启用代理
VITE_HTTP_PROXY = false
# 端口
VITE_PORT = 80
#生产环境接口地址
VITE_SERVE="https://www.niech.cn:8080"
# 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip

二、package.json命令修改

构建命令中指定模式，可以使用–mode

"scripts": {
  "dev": "vite",
  "build:dev": "vite build --mode development",
  "build:prod": "vite build --mode production",
  "preview": "vite preview",
  "start:dev": "vite build --mode development&&electron-forge start",
  "start:prod": "vite build --mode production&&electron-forge start",
  "package": "vite build&&electron-forge package",
  "make": "vite build&&electron-forge make"
}

三、测试运行

1、运行测试命令

PS D:\webPro\yunfeng\electron-vite-project> npm run start:dev

> electron-vite-project@0.0.0 start:dev
> vite build --mode development&&electron-forge start

env {
  VITE_APP_TITLE: '云风知识库',
  VITE_APP_ENV: 'development',
  VITE_APP_BASE_API: '/stage-api',
  VITE_HTTP_PROXY: 'false',
  VITE_PORT: '80',
  VITE_SERVE: 'http://www.applefv.com',
  VITE_BUILD_COMPRESS: 'gzip'
}

2、运行正式命令

PS D:\webPro\yunfeng\electron-vite-project> npm run start:prod

> electron-vite-project@0.0.0 start:prod
> vite build --mode production&&electron-forge start

env {
  VITE_APP_TITLE: '云风笔记',
  VITE_APP_ENV: 'production',
  VITE_APP_BASE_API: '/',
  VITE_HTTP_PROXY: 'false',
  VITE_PORT: '80',
  VITE_SERVE: 'https://www.niech.cn:8080',
  VITE_BUILD_COMPRESS: 'gzip'
}