(八)vue3+vite如何使用process.env

423 阅读1分钟

接上一篇,什么是process呢, process既不是electron的东东,也不是vue定义的,它是node体系的:

在Nodejs中,process是一个全局对象,它提供了与当前进程和运行时环境交互的方法和属性。通过process对象,我们可以访问进程的信息、控制流程和进行进程间通信,这些都是服务端语言应该具备的能力。本文将全面介绍process对象的使用场景,从基础概念到高级应用,带有代码示例,让您深入了解它的功能与用途。

说白了,process是nodejs的一个对象,好,我们回到问题,在electron和vue主进程和渲染进程,如何只用一个控制口来判断环境呢,我们只希望在命令行判断就好,后续代码更容易维护

// package.json
"start": "cross-env ELECTRON_MODE=dev2 concurrently \"vite\" \"nodemon --exec electron .\"",

在vue里面怎么取到ELECTRON_MODE的值呢?看下面的代码:

// vite.config.js
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

export default defineConfig(({ mode, command }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量,而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), "");

  // console.log(env.ELECTRON_MODE);
  return {
    base: "./",
    plugins: [vue()],
    // envDir:'env',  默认root
    // envPrefix:'YQF', 默认VITE
    define: {
      "process.env": env,// 不一定要定义成process.env
    },
  };
});

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

//app.vue
<script lang="ts" setup>
console.log('app.vue cross-env:', process.env.ELECTRON_MODE)
</script>

好,看看结果

image.png

成功了,这样就只需要修改一个地方啦

参考链接:blog.csdn.net/m0_46171043…