实际项目中nuxt.js多环境变量配置的操作是怎样�

Admin 2022-06-21 群英技术资�

这篇文章给大家分享的是“实际项目中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: 'https://ydhtml.com',
    test: 'https://test-ydhtml.com',
    rc: 'https://rc-ydhtml.com'
}

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

关于“实际项目中nuxt.js多环境变量配置的操作是怎样的”就介绍到这了,如果大家觉得不错可以参考了解看看,如果想要了解更多,欢迎关注群英网络,小编每天都会为大家更新不同的知识�

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

群英网络开启智能安全云计算之旅

注册领取新人大礼�
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务

联系我们

24小时售后 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 公司总机�0668-2555555 公司传真�0668-2555000
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部