热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Nuxt不同环境如何区分的方法

在一般情况下,我们的项目肯定需要区分不同环境,那么Nuxt提供给我们这样的基本能力了么,下面我们就一起来了解一下

背景

在一般情况下,我们的项目肯定需要区分不同环境,来决策其对应的策略,包括但不局限于接口转发地址、打包策略、日志输出策略等。那么抛开具体要设置哪些内容,我们需要先要有区分环境的能力才能做这些事情。那么Nuxt提供给我们这样的基本能力了么?答案是肯定的。

下面我们以不同环境肯定会不一样的接口转发地址为例,进行相关的说明。

nuxt.config.js

用Nuxt框架开发的同学相信对这个配置文件都不陌生,那么本文也会涉及到这里面的一个具体配置就是axios的配置。配置的地址取决于一个变量,这个变量是不确定的。配置代码如下:

备注:关于axios以及proxy如何配置参考我另外的文章哦。

export default {
 modules: ["@nuxtjs/axios"],
 axios: {
        // 是否允许跨域
        proxy: true,
        // 最多重发三次
        retry: {
            retries: 3,
        },
        // 非线上环境开启debug
        debug: !isProd,
        // 是否是可信任
        withCredentials: true,
        timeout: 2000,
    },
proxy: {
        "/api": {
            changeOrigin: true,
            target: targetUrl,
            pathRewrite: {
                "^/api": "/api",
            },
        }
   }
}

关键参数

isProd , targetUrl

其中不同环境的地址我们可以做静态维护,根据环境标识来取用对应的环境地址,而是否是生产环境,也可以通过环境标识来控制。
假设我们的不同环境的配置字典是这样的(建议单独写一个配置文件的config.js)。
备注:其中预发环境建议与生产环境除了域名配置不一样,其他尽量保持一致,可以前置尽可能的奇怪问题。

export default {
    dev: "http://dev.xxx.net/",
    stable: "https://stable.xxx.net/",
    pre: "https://pre.xxx.com/",
    prod: "http://xxx.com/",
}

那么使用定义变量便是如下:

const isProd = process.env.NODE_ENV === "prod";
const targetUrl = serverConfig[ process.env.NODE_ENV || 'stable'];

那么process.env.NODE_ENV 是如何定义出来的呢?我们根据项目开发的不同阶段区分处理。
开发阶段设置变量

在npm中有这样一个开源库,可以实现跨平台的设置node变量,它便是cross-env,npm模块地址:https://www.npmjs.com/package/cross-env,怎么安装就不赘述了。

因为本地开发一般执行的是npm run dev,而默认的包文件的执行命令中是没有区分环境的配置的,所以简单处理,我们可以直接在包文件的可执行脚本中增加对应的可执行脚本,目的就是我不想因为切换环境不断的修改我的配置文件或者通过注释选择修改哪个文件,另外这一点也是更符合开发习惯的,在一般情况下,我们也不会各个环境来回切换调试一个功能。

package.json 中追加的可执行命令:其中我们定义的NODE_ENV的值就是我们在配置文件的键值,请保持它们的一致性。

 "scripts": {
    "dev": "cross-env NODE_ENV=dev nuxt",
    "dev-stable": "cross-env NODE_ENV=stable nuxt",
    "dev-pre": "cross-env NODE_ENV=pre nuxt",
    "dev-prod": "cross-env NODE_ENV=prod nuxt"
 }

部署阶段

部署阶段,作为常识,我们知道,最终一定是服务器进程守护的部署,不会是npm run start 这种方式部署。所以对应的引入pm2是基本选型,而pm2的生态下是支持使用配置文件部署的。你可以在根目录下创建ecosystem.config.js,然后配置基本的内容如下:其中以env_xx 的部分就是在pm2中支持配置环境变量的部分,相比cross-env,设置变量的方式更加简洁,是个js基本对象格式的。保持也是设置NODE_ENV以及对应的env标识即可。

module.exports = {
  apps: [
    {
      name: 'demo_pc',
      exec_mode: 'cluster',
      instances: '2', // Or a number of instances
      script: './node_modules/nuxt/bin/nuxt.js',
      args: 'start',
      log_date_format:'hxpc_YYYY-MM-DD HH:mm Z',
      log_file:'pc.log',
      out_file: 'out.log',
      env: {
        "NODE_ENV": "prod",
      },
      env_dev: {
        "NODE_ENV": "dev",
      },
      env_prod : {
         "NODE_ENV": "prod"
      },
      env_pre : {
        "NODE_ENV": "pre"
      },
      env_stable : {
        "NODE_ENV": "stable"
     }
    },
   ]
 }

然后在启动时,可以使用pm2 start --env stable 来指定使用哪个环境。我为了方便运维,在习惯上,将默认的不设置env 设置为启动生产环境配置。pm2 start,这种情况下会使用env 这个的对应配置。

小结

本文介绍就到这里了,希望大家可以清楚的知道如何根据环境标识自定义设置和使用一些环境差异变量,并且发掘和利用好这一点。

到此这篇关于Nuxt不同环境如何区分的方法的文章就介绍到这了,更多相关Nuxt不同环境区分内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!


推荐阅读
  • 作为140字符的开创者,Twitter看似简单却异常复杂。其简洁之处在于仅用140个字符就能实现信息的高效传播,甚至在多次全球性事件中超越传统媒体的速度。然而,为了支持2亿用户的高效使用,其背后的技术架构和系统设计则极为复杂,涉及高并发处理、数据存储和实时传输等多个技术挑战。 ... [详细]
  • 本文介绍了使用 Python 编程语言高效抓取微博文本和动态网页图像数据的方法。通过详细的示例代码,展示了如何利用爬虫技术获取微博内容和动态图片,为数据采集和分析提供了实用的技术支持。对于对网络数据抓取感兴趣的读者,本文具有较高的参考价值。 ... [详细]
  • 优化Node.js项目:有效管理和清理依赖项
    在Node.js项目中,有效管理和清理依赖项是提升性能和安全性的重要步骤。为了确保项目中仅保留必要的库,应定期检查并移除`node_modules`目录下不再使用的包。同时,所有必需的依赖项都应在`package.json`文件中明确列出,以保证项目的可维护性和可复现性。此外,利用如`npm prune`等工具可以帮助自动化这一过程,进一步提高效率。 ... [详细]
  • Jedis接口分类详解与应用指南
    本文详细解析了Jedis接口的分类及其应用指南,重点介绍了字符串数据类型(String)的接口功能。作为Redis中最基本的数据存储形式,字符串类型支持多种操作,如设置、获取和更新键值对等,适用于广泛的应用场景。 ... [详细]
  • 优化后的标题:AppVeyor CI: 集成 Microsoft Visual C++ 编译环境的持续集成解决方案 ... [详细]
  • 本文介绍了如何通过掌握 IScroll 技巧来实现流畅的上拉加载和下拉刷新功能。首先,需要按正确的顺序引入相关文件:1. Zepto;2. iScroll.js;3. scroll-probe.js。此外,还提供了完整的代码示例,可在 GitHub 仓库中查看。通过这些步骤,开发者可以轻松实现高效、流畅的滚动效果,提升用户体验。 ... [详细]
  • 智能制造数据综合分析与应用解决方案
    在智能制造领域,生产数据通过先进的采集设备收集,并利用时序数据库或关系型数据库进行高效存储。这些数据经过处理后,通过可视化数据大屏呈现,为生产车间、生产控制中心以及管理层提供实时、精准的信息支持,助力不同应用场景下的决策优化和效率提升。 ... [详细]
  • Ceph API微服务实现RBD块设备的高效创建与安全删除
    本文旨在实现Ceph块存储中RBD块设备的高效创建与安全删除功能。开发环境为CentOS 7,使用 IntelliJ IDEA 进行开发。首先介绍了 librbd 的基本概念及其在 Ceph 中的作用,随后详细描述了项目 Gradle 配置的优化过程,确保了开发环境的稳定性和兼容性。通过这一系列步骤,我们成功实现了 RBD 块设备的快速创建与安全删除,提升了系统的整体性能和可靠性。 ... [详细]
  • Spring框架入门指南:专为新手打造的详细学习笔记
    Spring框架是Java Web开发中广泛应用的轻量级应用框架,以其卓越的功能和出色的性能赢得了广大开发者的青睐。本文为初学者提供了详尽的学习指南,涵盖基础概念、核心组件及实际应用案例,帮助新手快速掌握Spring框架的核心技术与实践技巧。 ... [详细]
  • 【前端开发】深入探讨 RequireJS 与性能优化策略
    随着前端技术的迅速发展,RequireJS虽然不再像以往那样吸引关注,但其在模块化加载方面的优势仍然值得深入探讨。本文将详细介绍RequireJS的基本概念及其作为模块加载工具的核心功能,并重点分析其性能优化策略,帮助开发者更好地理解和应用这一工具,提升前端项目的加载速度和整体性能。 ... [详细]
  • 本文深入探讨了数据库性能优化与管理策略,通过实例分析和理论研究,详细阐述了如何有效提升数据库系统的响应速度和处理能力。文章首先介绍了数据库性能优化的基本原则和常用技术,包括索引优化、查询优化和存储管理等。接着,结合实际应用场景,讨论了如何利用容器化技术(如Docker)来部署和管理数据库,以提高系统的可扩展性和稳定性。最后,文章还提供了具体的配置示例和最佳实践,帮助读者在实际工作中更好地应用这些策略。 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • 可转债数据智能抓取与分析平台优化
    本项目旨在优化可转债数据的智能抓取与分析平台。通过爬取集思录上的可转债信息(排除已发布赎回的债券),并结合安道全教授提出的三条安全线投资策略,新增了建仓线、加仓线和重仓线,以提供更精准的投资建议。 ... [详细]
  • 0.10.2 编译在 ARMHF 和 ARME 架构上遇到问题 ... [详细]
  • 本章节深入探讨了 Webpack 命令的高级功能,涵盖了官方快速入门教程中未涉及的细节。通过实际操作和案例分析,对官方文档进行了详细解读与补充,帮助读者更好地理解和应用这些进阶技巧。 ... [详细]
author-avatar
手机用户2502916627
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有