(八)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...

相关推荐
云枫晖6 分钟前
手写Promise-构造函数
前端·javascript
文心快码BaiduComate6 分钟前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
王王碎冰冰10 分钟前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
naice1 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼1 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin1 小时前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗1 小时前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀6962 小时前
CSS-响应式布局
前端
三小河2 小时前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法2 小时前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端