无法访问 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()]
   });
}

如何从我的 vue 文件访问 process 变量，以便获取我的环境变量的值并使 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 documentation中的规定，只有前缀为VITE_的变量才会被暴露：

To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code.

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

Unable to access process variable in Vue3JS Vite project

javascript

vue.js

ipfs

web3

vite