（八）vue3+vite如何使用process.env

用户32829744393422024-03-29 17:30

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

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

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

js 复制代码

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

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

js 复制代码

// 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
    },
  };
});

js 复制代码

//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>

好，看看结果

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

参考链接：blog.csdn.net/m0_46171043...