如何在 Nuxt3 中通过使用 process.env 的方式来访问自定义的环境变量

在 Nuxt3 中，我们一些自定义的环境变量不能通过 process.env.CUSTEM_VAR 这样的方式在我们的业务代码中使用了（但目前还能在 nuxt.config.ts 文件中使用）

Nuxt3 的官方文档中推荐使用的是运行时配置，全局通过 useRuntimeConfig 来获取环境变量，并让我们从 process.env 迁移到 useRuntimeConfig 上。关于迁移更多信息请看：https://nuxt.com/docs/migration/runtime-config

如果是我们自己写的代码我们可以使用新的方式，但是在一些第三方库中是直接使用 process.env 的方式获取的。例如某个第三方库包含这样的代码：


                    (
                        typeof process !== 'undefined' &&
                        process.env.TESS_ENV === 'development'
                    ) 
                    ? "some result" : "other results"

运行时就会报错 TypeError: Cannot read properties of undefined (reading 'TESS_ENV')（目前我使用的 Nuxt 版本是当前最新版本 v3.1.2）

所以如果想要不修改第三方库源码的情况下修复这个问题，只要使得 process.env 不为 undefined 就行。下面是解决办法：

解决方案：

在 nuxt.config.ts 文件中添加以下配置


                    export default defineNuxtConfig({
                        vite: {
                            define: {
                                "process.env": "{}",
                            },
                        },
                    )}

以上，使得我们的代码中 process.env 为 {}，而不是 undefined，解决了第三方库报错问题。

当然，你还可以让 process.env 包含一些变量，而不是一个空对象。例如：


                    export default defineNuxtConfig({
                        vite: {
                            define: {
                                "process.env.SERVER_API_PATH": "'http://server...'",
                                "process.env.FILE_API_PATH": "'http://file...'",
                            },
                        },
                    )}