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

Question

我正在创建一个 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使用该代码导出文件中的进程环境，但它不起作用：

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()]
   });
}

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

Answer 1

.env

VITE_WEB3_STORAGE_TOKEN="your_token"

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

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

注意：根据vite 文档中的规定，只有前缀为 的变量VITE_才会被公开：

为了防止意外地将环境变量泄漏给客户端，只有前缀为 的变量VITE_才会暴露给您的 Vite 处理的代码。