（七）electron与vue3项目 ，如何区分开发环境 vs 生成环境

前提：打包用的是vite

渲染进程如何区分不同环境，vue项目如何区分不同环境

当执行vite命令时，会执行.env和.env.development，环境变量以VITE_开头，也可以自行定义前缀

.env
HELLO = 'hello'
VITE_HELLO= 'vite hello' 

.env.development
VITE_NAME = 'vite name'

.env.production
VITE_NAME = 'production vite name'

main.js
console.log(' import.meta.env.MODE: ',  import.meta.env.MODE);
console.log(' import.meta.env.BASE_URL: ',  import.meta.env.BASE_URL);
console.log(' import.meta.env.PROD: ',  import.meta.env.PROD);
console.log(' import.meta.env.DEV: ',  import.meta.env.DEV);
console.log(' import.meta.env.SSR: ',  import.meta.env.SSR);

console.log('hello: ', import.meta.env.HELLO)
console.log('vite hello: ', import.meta.env.VITE_HELLO)
console.log('vite name: ', import.meta.env.VITE_NAME)

index.vue
console.log('page get env：', import.meta.env.VITE_NAME)

执行npm run start结果：

electron主进程如何区分不同环境

用win下专用命令

set ELECTRON_MODE=dev

//package.json
 "scripts": {
    "start": "set ELECTRON_MODE=dev && concurrently \"vite\" \"nodemon --exec electron .\"",
  },
  
//background.js
console.log('process.env：',process.env.ELECTRON_MODE)

运行结果：

听说mac下process.env.ELECTRON_MODE是undefined（没有在mac运行过，又有新的问题出现）

可以使用cross-env解决跨平台运行的问题

安装：npm install --save-dev cross-env

//package.json
 "scripts": {
    "start": "cross-env ELECTRON_MODE=dev2 concurrently \"vite\" \"nodemon --exec electron .\"",
  },
  
//background.js
console.log('process.env：',process.env.ELECTRON_MODE)

成功了，看下运行结果：

而且cross-env可以不使用&&：cross-env ELECTRON_MODE=dev2 concurrently

用app.isPackaged

判断应用是否打包 ，已经打包返回true，未打包false，用来判断环境有局限性，单纯记录一下吧

一些思考

上面我们将项目分为主进程 、渲染进程，分别来判断环境，那有没有一种方法，2个进程都能用呢，感觉第二种方法，应该可以，可以来试一下

// main.js
console.log('cross-env：', process.env.ELECTRON_MODE)

显示process没有值，，，很奇怪，网上一查发现vue3将process.env 移除了，，嗯， 那有没有什么办法能获取到process, process是个什么东东呢？有很多问题需要答案呢，，留到下一篇写吧