无法访问 Vue3JS Vite 项目中的流程变量答案

【问题标题】：Unable to access process variable in Vue3JS Vite project无法访问 Vue3JS Vite 项目中的流程变量
【发布时间】：2022-07-19 04:28:52
【问题描述】：

我正在创建一个 vue3 应用程序（使用 Vite 创建），它与用 Solidity 编写并存储在 Ropsten 上的智能合约进行交互。因此，我使用 web3js 与我的智能合约和 web3.storage 进行交互，以便在 IPFS 上存储一些图像。我的项目根目录中有一个 .env 文件，用于存储我的 web3.storage 的 API 密钥：

VUE_APP_API_TOKEN=VALUE
VITE_API_TOKEN=VALUE

问题显然是 web3.storage 期望 API 令牌存储在 process.env 中，我无法从我的应用程序访问全局 process 变量。我总是收到错误Uncaught ReferenceError: process is not defined。

我认为，这与我使用 Vite 而不是纯 Vue3 有关。我尝试使用该代码在 vite.config.ts 文件中导出进程 env，但它不起作用：

export default ({ mode }) => {
   process.env = { ...process.env, ...loadEnv(mode, process.cwd(), '') };

   console.log(process.env.VITE_API_TOKEN)         //Works fine: VALUE is logged
   console.log(process.env.VUE_APP_API_TOKEN)      //Works fine: VALUE is logged

   return defineConfig({
       plugins: [vue()]
   });
}

如何从我的 vue 文件中访问 process 变量以获取我的环境变量的值并使 web3.storage 工作？

【问题讨论】：

Docs 可能会有所帮助。
@tao 感谢您的提示，我已经尝试过文档但没有帮助

标签： javascript vue.js web3js vite ipfs

【解决方案1】：

.env

VITE_WEB3_STORAGE_TOKEN="your_token"

SomeComponent.vue：（或者你应用的任何其他文件，真的）：

console.log(import.meta.env.VITE_WEB3_STORAGE_TOKEN) // "your_token"

注意：在vite documentation中指定，只有以VITE_为前缀的变量会被暴露：

为防止意外将 env 变量泄露给客户端，只有以 VITE_ 为前缀的变量才会暴露给 Vite 处理的代码。

【讨论】：

好的，谢谢您的解决方案，我觉得这是唯一的方法。 Vue3 项目中似乎无法再访问“进程”全局变量
这不是，正是因为我的回答中引用的原因。考虑到process 可以访问什么，以及人们倾向于在这些环境变量中添加什么，我个人认为只公开带有VITE 前缀的内容是明智的。您现在可以安全地使用其他名称来表示不应在客户端的任何位置显示的内容。