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

接上一篇,什么是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...

相关推荐
ReturnTrue8688 分钟前
nginx性能优化之Gzip
前端
w_y_fan1 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇1 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端
Asort1 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手1 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码1 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码1 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
南雨北斗1 小时前
VS Code 中手动和直接运行TS代码
前端
小高0071 小时前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
Samsong1 小时前
JavaScript逆向之反制无限debugger陷阱
前端·javascript