脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → nuxt.js 多环境变量配置

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

您可能感兴趣的文章:

相关文章

  • 浅谈克隆 JavaScript

    浅谈克隆 JavaScript

    这篇文章主要介绍了克隆 JavaScript,克隆又有浅克隆与深克隆，文章围绕JavaScript浅克隆与深克隆的相关资料展开具体内容,需要的朋友可以参考一下
    2021-10-10
  • JS开发前端团队展示控制器来为成员引流

    JS开发前端团队展示控制器来为成员引流

    这篇文章主要为大家介绍了JS开发前端团队展示控制器实现为成员引流示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • JavaScript构造函数与原型之间的联系

    JavaScript构造函数与原型之间的联系

    这篇文章主要介绍了JavaScript构造函数与JavaScript原型，构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用，构造函数通过原型分配的函数是所有对象所共享的。下面来看看文章的集体介绍内容吧
    2021-12-12
  • 微信公众号 客服接口的开发实例详解

    微信公众号 客服接口的开发实例详解

    这篇文章主要介绍了微信公众号 客服接口的开发实例详解的相关资料,需要的朋友可以参考下
    2016-09-09
  • Javascript 小技巧全集

    Javascript 小技巧全集

    Javascript 小技巧全集...
    2006-06-06
  • JavaScript执行机制详细介绍

    JavaScript执行机制详细介绍

    这篇文章主要介绍了JavaScript执行机制，想要搞懂JavaScript执行机制，便与进程与线程的概念脱不了干系，下面我们就来看看这JavaScript执行机制的具体介绍吧,需要的朋友可以参考一下
    2021-12-12
  • JS异步观察目标元素方式完成分页加载

    JS异步观察目标元素方式完成分页加载

    这篇文章主要为大家介绍了异步观察目标元素方式完成分页加载示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • 微信小程序 wxapp画布 canvas详细介绍

    微信小程序 wxapp画布 canvas详细介绍

    这篇文章主要介绍了微信小程序 wxapp画布 canvas的相关资料,需要的朋友可以参考下
    2016-10-10
  • 微信小程序 密码输入（源码下载）

    微信小程序 密码输入（源码下载）

    这篇文章主要介绍了微信小程序 密码输入（源码下载）的相关资料,需要的朋友可以参考下
    2017-06-06
  • 输入框跟随文字内容适配宽实现示例

    输入框跟随文字内容适配宽实现示例

    这篇文章主要为大家介绍了输入框跟随文字内容适配宽实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08

最新评论