Plesk自定义环境变量在Nuxt.js构建阶段无法访问的问题求助

环境信息 #

• Nuxt v2.15.8
• Node.js 14.21.1
• Plesk Obsidian 18.0.48

问题背景 #

通过npm init nuxt-app创建基础Nuxt项目，安装nuxt-start适配Plesk Node.js模块后，发现Plesk后台设置的自定义环境变量仅在运行时可用，构建阶段无法读取，导致以下问题：

1. nuxt.config.js的proxy配置中，process.env.WP_BACKEND_URL返回undefined，只能使用fallback地址；但运行时axios请求代理实际指向正确的后端地址
2. publicRuntimeConfig中使用同一个变量却能正常获取值
3. image模块的domains配置同样无法读取变量，且运行时不会自动更新配置

解决方案 #

方案1：构建命令前手动注入环境变量 #

Plesk支持在构建命令中直接追加环境变量，让构建阶段能读取到Plesk设置的值。修改Plesk的构建命令为：

WP_BACKEND_URL=https://wp.domain.tld npm run build

替换https://wp.domain.tld为你实际的后端地址，这样构建时proxy和image配置就能正确读取到环境变量。

方案2：用serverMiddleware动态处理代理（运行时生效） #

如果无法修改构建命令，可以通过Nuxt的serverMiddleware实现动态代理，替代原生的proxy配置：

1. 创建server/middleware/proxy.js文件：

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = (req, res) => {
  const target = process.env.WP_BACKEND_URL || 'https://fallback.domain.tld'
  return createProxyMiddleware('/api/', {
    target,
    changeOrigin: true,
    pathRewrite: { '^/api/': '/' }
  })(req, res)
}

2. 在nuxt.config.js中注册该中间件：

export default {
  // ...其他配置
  serverMiddleware: [
    { path: '/api/', handler: '~/server/middleware/proxy.js' }
  ],
  // 移除原来的proxy配置
}

这样运行时代理会动态读取Plesk的环境变量，无需依赖构建阶段的配置。

方案3：处理Image模块的Domains配置 #

Nuxt Image的domains是构建时固化的，运行时无法修改，可选处理方式：

• 采用方案1的构建注入方式，让构建阶段读取到环境变量
• 允许的话设置通配符域名（如*.domain.tld），但注意存在安全风险
• 自定义图片请求逻辑，通过axios转发图片请求（复杂度较高，不推荐）

总结 #

优先推荐方案1，直接在构建命令中注入环境变量，解决所有构建阶段的配置问题；如果无法修改构建命令，用方案2处理代理，Image配置尽量配合构建注入使用。

内容的提问来源于stack exchange，提问作者Vipa