nuxt.js 多环境变量配置

更新时间：2021年11月03日 14:32:41 作者：林间有风

这篇文章主要介绍了nuxt.js 多环境变量配置，一般在香米开发中会有三个环境开发环境也叫测试环境(test) 、RC环境也叫预发布环境(rc) 、线上环境(production) 下面来看看文章内容的详细介绍,需要的朋友可以参考一下

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 多环境变量配置内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

您可能感兴趣的文章:

微信小程序支付功能（前端）的实现
这篇文章主要介绍了微信小程序支付功能（前端）的实现的相关资料,需要的朋友可以参考下
2017-05-05
await-to-js源码深入理解处理异步任务用法示例
这篇文章主要为大家介绍了await-to-js源码更完美处理异步任务示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
微信小程序 loading 详解及实例代码
这篇文章主要介绍了微信小程序 loading 详解及实例代码的相关资料,需要的朋友可以参考下
2016-11-11
js中闭包结合递归等于柯里化原理解析
这篇文章主要为大家介绍了闭包结合递归等于柯里化的原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
微信小程序底部导航栏目开发资料
这篇文章主要介绍了微信小程序底部导航栏目开发资料的相关资料，微信小程序底部想要有一个漂亮的导航栏目，不知道怎么制作，于是百度找到了本篇文章，分享给大家,需要的朋友可以参考下
2016-12-12
微信小程序下拉刷新界面的实现
这篇文章主要介绍了微信小程序下拉刷新界面的实现的相关资料,希望通过本文能帮助到大家实现这样的功能，需要的朋友可以参考下
2017-09-09
JavaScript实现队列结构过程
这篇文章主要介绍了JavaScript实现队列结构的过程,队列即Queue，它是受限的线性表，先进先出，受限之处在于它只允许在表的前端进行删除操作，下面我们一起进入文章学习更加详细内容,需要的朋友也可以参考一下
2021-12-12
详解lodash中的cloneDeep使用细节
这篇文章主要为大家介绍了详解lodash中的cloneDeep使用细节，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
解析Javascript设计模式Revealing?Module?揭示模式单例模式
这篇文章主要为大家解析了Javascript设计模式Revealing?Module?揭示模式及Singleton单例模式示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
微信小程序刷新上拉下拉不会断详细介绍
这篇文章主要介绍了微信小程序上拉下拉不会断详细介绍的相关资料,需要的朋友可以参考下
2017-05-05