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

Question

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

VUE_APP_API_TOKEN=VALUE
VITE_API_TOKEN=VALUE

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

我认为，这与我使用Vite而不是纯Vue3有关。我试图用该代码在vite.config.ts文件中导出process，但它没有工作：

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存储工作？

Answer 1

.env

VITE_WEB3_STORAGE_TOKEN="your_token"

SomeComponent.vue: (或者你的应用程序的任何其他文件，真的)：

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

Note：正如vite文档中所指定的，只有以VITE_为前缀的变量才会被公开：

为了防止意外地向客户端泄漏env变量，只有以VITE_为前缀的变量才会暴露到您的Vite处理代码中。

Answer 2

如果在CI中运行构建脚本，则需要确保在运行构建脚本之前创建/填充相关的.env文件。