nuxt3项目打包后获取.env设置的环境变量无效的解决办法

news2024/11/17 6:18:43

问题描述

在nuxt3项目开发过程中，设置了开发环境变量和生产环境变量，在本地开发时都能正常获取，但打包部署时获取不到，设置如下：

//.env.development文件示例
SERVER_API_PATH='http://192.168.25.100'

//.env.production文件示例
SERVER_API_PATH='https://www.xxxxxx.com'

在开发时获取自定义的环境变量还需要在package.json文件中加上如下配置：

{
 "scripts": {
    "build": "nuxt build --dotenv .env.production",
    "dev": "nuxt dev --dotenv .env.development",
  },
}

当前使用版本为：

 "nuxt": "^3.12.2",
 "node":"20.12.2",
 "vue": "^3.4.29"

比如当需要发送登录请求时，在server文件夹下的api文件可以通过process.env.SERVER_API_PATH 获取：
在这里插入图片描述
而在打包后用同等方法获取却没有值，值显示为undefined，通过打印process.env的值可以看出，没有任何自定义的环境变量。

解决方法

将.env.production复制到.output的server文件夹下，与index.mjs同级；
在index.mjs中添加代码；

import path from 'node:path'
process.loadEnvFile(path.resolve(process.cwd(), '.env'));

重新启动项目。

 node .output/server/index.mjs

添加后的index.mjs文件

import process from 'node:process';
globalThis._importMeta_={url:import.meta.url,env:process.env};
import 'node:http';
import 'node:https';
export { L as default } from './chunks/runtime.mjs';
import 'fs';
import 'path';
import 'node:fs';
import 'node:url';
//# sourceMappingURL=index.mjs.map
/*以上为index.mjs原文*/
//这是添加的代码
import path from 'node:path'
process.loadEnvFile(path.resolve(process.cwd(), '.env'));