脚本宝典收集整理的这篇文章主要介绍了nuxt.js 多环境变量配置，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1、前言

一般在我们项目开发中，一般会有以下3个环境

• 开发环境也叫测试环境(test)
• RC环境也叫预发布环境(rc)
• 线上环境(PRoduction)

2、场景

那么有一种情况是我们需要在不同环境下区分不同的api接口例如

• 测试环境(test) api=test.ydhtML.COM

• 预发布环境(rc) api=rc.ydhtml.com

• 线上环境(production) api=ydhtml.com

3、创建环境

接下来我们在项目的根目录中创建 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]
    }
}

4、最后

最后我们在页面里面使用，代码如下：

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 多环境变量配置的文章就介绍到这了,更多相关nuxt.js 多环境变量配置内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

脚本宝典总结

以上是脚本宝典为你收集整理的nuxt.js 多环境变量配置全部内容，希望文章能够帮你解决nuxt.js 多环境变量配置所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。