uni-app的多环境部署配置

简介: 分享下如何对uni-app项目进行多环境打包部署改造

本文记录的方法适用于vue-cli方式创建的 uni-app 项目。

环境区分

官方文档说明:
开发环境和生产环境
uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。
在HBuilderX 中,点击“运行”编译出来的代码是开发环境,点击“发行”编译出来的代码是生产环境

解决方案

  1. 使用基于vue-cli命令行方式创建项目
  2. 添加必要的环境变量, VUE_APP_ 起始,例如 VUE_APP_BASE_API
    即在项目根目录新建不同环境的变量配置文件,并分别写入环境所需配置

    • .env.development
    • .env.test
    • .env.production
  3. 然后可以通过 VUE_APP_BASE_API 访问
    例如:在项目内请求接口的地方设置 baseurl 为 process.env.VUE_APP_BASE_API
  4. 修改 package.json
    增加以下脚本,在启动或者打包时以切换不同服务器(不一定完全按照下方设置)。
    这里的需求是在开发模式启动时方便切换开发、测试、生产环境的数据库方便验证问题,以及发行至各环境

"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:h5-test": "cross-env NODE_ENV=test UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:h5-dev": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-build", 
"dev:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-serve --watch",
"dev:h5-test": "cross-env NODE_ENV=test UNI_PLATFORM=h5 vue-cli-service uni-serve --watch",
"dev:h5-dev": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve --watch",
  1. 最后像普通vue项目一样使用就行了
npm run dev:h5-test

参考资料

相关文章
|
2月前
|
域名解析 网络协议 API
【Azure Container App】配置容器应用的缩放规则 Managed Identity 连接中国区 Azure Service Bus 问题
本文介绍了在 Azure Container Apps 中配置基于自定义 Azure Service Bus 的自动缩放规则时,因未指定云环境导致的域名解析错误问题。解决方案是在扩展规则中添加 `cloud=AzureChinaCloud` 参数,以适配中国区 Azure 环境。内容涵盖问题描述、原因分析、解决方法及配置示例,适用于使用 KEDA 实现事件驱动自动缩放的场景。
|
4月前
|
人工智能 文件存储 数据中心
Ollama部署本地大模型并通过Infortress APP远程访问保姆级教程
本文介绍如何快速上手本地大模型部署工具Ollama及AI远程访问工具Infortress。通过Ollama,开发者可轻松部署如Llama、Deepseek等主流开源模型,仅需几行命令即可完成安装与运行。结合Infortress,用户能实现对本地大模型的远程访问,支持多设备无缝对接,同时提供便捷的模型切换与知识库管理功能。Infortress更兼具NAS软件特性,成为个人AI数据中心的理想选择。
|
5月前
|
人工智能 JSON 小程序
【一步步开发AI运动APP】七、自定义姿态动作识别检测——之规则配置检测
本文介绍了如何通过【一步步开发AI运动APP】系列博文,利用自定义姿态识别检测技术开发高性能的AI运动应用。核心内容包括:1) 自定义姿态识别检测,满足人像入镜、动作开始/停止等需求;2) Pose-Calc引擎详解,支持角度匹配、逻辑运算等多种人体分析规则;3) 姿态检测规则编写与执行方法;4) 完整示例展示左右手平举姿态检测。通过这些技术,开发者可轻松实现定制化运动分析功能。
|
3月前
《仿盒马》app开发技术分享-- 首页活动配置(5)
上一篇文章中我们实现了项目端云一体化首页部分模块动态配置,实现了对模块模块的后端控制显示和隐藏,这能让我们的app更加的灵活,也能应对更多的情况。现在我们来对配置模块进行完善,除了已有的模块以外,我们还有一些banner ,活动入口等模块,这些模块的数据并不多,所以我们也归纳到配置中去实现。并且我们在配置表中添加了一些不同的id,我们只需要根据相对应的id 去查询对应的表就可以了
76 0
|
5月前
|
存储 监控 API
【Azure App Service】分享使用Python Code获取App Service的服务器日志记录管理配置信息
本文介绍了如何通过Python代码获取App Service中“Web服务器日志记录”的配置状态。借助`azure-mgmt-web` SDK,可通过初始化`WebSiteManagementClient`对象、调用`get_configuration`方法来查看`http_logging_enabled`的值,从而判断日志记录是否启用及存储方式(关闭、存储或文件系统)。示例代码详细展示了实现步骤,并附有执行结果与官方文档参考链接,帮助开发者快速定位和解决问题。
162 23
|
6月前
|
网络协议
【Azure App Service】App Service 如何配置私网域名以及证书呢?
本文解答了关于 Azure App Service 如何配置私网域名及证书的问题。App Service 不支持私网域名,自定义域名需配置在公共 DNS 服务器上。文章引用官方文档详细说明了映射自定义 DNS 的步骤,并附带参考资料链接,帮助用户深入了解相关配置方法。
133 6
|
SQL 网络安全 Windows
|
3天前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
28 0
|
2月前
|
人工智能 文字识别 小程序
旅游社用什么工具收报名 + 资料?不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案,重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具,分析其适用场景与实际应用逻辑,为一线旅游从业者提供高效、低成本的执行参考。

热门文章

最新文章