Nuxt.js 多环境变量配置指南

作者:雾松时间:2026-10-24 18:07:39浏览:155

本文介绍如何在 Nuxt.js 项目中配置开发、预发布及线上多环境。通过创建 env.js 定义 MODE,在 package.json 中配置 cross-env 构建命令,并在 nuxt.config.js 中注入环境变量。最终在页面代码中根据环境动态获取对应 API 接口地址,实现不同环境下接口的灵活切换。

前言

在常规项目开发流程中,通常涉及三种不同的运行环境。

  • 开发环境,即测试环境(test)。
  • RC环境,即预发布环境(rc)。
  • 线上环境(production)。

应用场景

在实际开发中,常需根据不同环境区分调用不同的api接口,具体示例如下。

  • 测试环境(test) api=test.ydhtml.com
  • 预发布环境(rc) api=rc.ydhtml.com
  • 线上环境(production) api=ydhtml.com

环境配置创建

接下来,在项目的根目录下创建 env.js 文件,其内容如下所示。


module.exports = {
    test: {
        MODE: 'test'
    },
    rc: {
        MODE: 'rc',
    },
    prod: {
        MODE: 'prod',
    }
}

完成对应环境的配置后,需在 package.json 文件中的 scripts字段内增加相应的打包命令。

具体配置如下:


"build:test": "cross-env MODE=test nuxt build",
"build:rc": "cross-env MODE=rc nuxt build",
"build:prod": "cross-env MODE=prod nuxt build",

3.1 配置环境变量注入

打开nuxt.config.js 文件,并在其中添加以下代码以注入环境变量。


const env = require('./env')
module.exports = {
    env: {
        NUXT_ENV: env[process.env.MODE]
    }
}

总结

最后,在页面代码中通过以下方式调用环境变量。


const api = {
    prod: 'http://ydhtml.com',
    test: 'http://test-ydhtml.com',
    rc: 'http://rc-ydhtml.com'
}

const baseURL = api[process.env.NUXT_ENV.MODE]

至此,关于 Nuxt.js 多环境变量配置的教程已结束。如需了解更多相关内容,可搜索本站往期文章或继续浏览后续文章,感谢大家的支持!

作者最新文章