uniapp自定义环境配置开发环境、测试环境、生产环境接口请求域名

最新推荐文章于 2025-04-20 14:18:01 发布
最新推荐文章于 2025-04-20 14:18:01 发布
阅读量2.6w 收藏 51
点赞数 8
分类专栏： uni-app 文章标签： uni-app 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41240940/article/details/113933748
版权
本文介绍了如何在uniapp项目中自定义环境配置，如开发环境、测试环境和生产环境接口请求域名。通过修改package.json文件，添加uni-app节点并配置自定义环境，例如微信小程序测试环境。文章详细说明了配置过程，并展示了在HBuliderX中运行和发行自定义环境的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用uniapp框架在进行项目开发过程中，uniapp默认可以判断生产环境和开发环境，如果我们需要再多配置几个环境的话，就需要进行自定义配置

uniapp运行环境判断
QQ截图20210222112619.png

uniapp自定义环境配置

官方文档
QQ截图20210222113006.png
下面我们以添加一个自定义微信小程序测试环境为例
在 package.json文件下添加uni-app节点

package.json文件为npm包管理的描述文件，记录了项目中依赖的第三方npm包的信息
如果项目跟目录下没有这个文件的话，可以执行 npm init 生成该文件

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
最低0.47元/天 解锁文章
技术合伙人必备攻略---app开发技术栈调研--多种方案对比--uniapp学习路线
直到世界的尽头
02-26 2129
app开发技术方案对比 app开发主要有几种技术方案如下： 原生开发 原生开发简介 原生(native)开发从定义上来说 一般是指用原生开发语言开发，原生开发语言就是开发整个系统时使用的编程语言。 对于iOS来说就是Objective C，对于Android来说…不太好说，因为Android用的Linux内核是用C开发的，中间层的库是用C/C++开发的，但应用程序框架和应用程序都是用Java开发的。 但实际上原生开发的含义有所扩展，主要区别于前端框架的跨端语言开发。 目前做ios原生开发多使用Swift语言
uni-app - 运行到内置浏览器使用 IP 地址（Network）访问（自定义域名）
王二红
03-14 7283
前言 默认情况下，运行后只能localhost访问，如下图所示： 解决方案 打开mainfest.json文件，添加disableHostCheck属性，将值设为true。 "h5":{ "devServer":{ "disableHostCheck":true } } 自定义域名 “本地hosts文件位置:C:\Windows\System32\Drivers\etc” 本地创建IIS站点添加域名 修改hosts文件：127.0.0.1www.你的域名.
uni-app 高效开发小程序技巧：自动化切换环境变量
前端梦工厂
04-10 1197
uni-app 作为一个开发利器，方便了广大开发者，尤其是在开发小程序的时候，今天给大家分享一个使用 uni-app 高效开发小程序的技巧，如何自动化切换环境变量，无缝适配微信小程序的各种版本！
uniapp自定义环境变量，编译到不同环境或小程序
u010640592的博客
01-23 1353
以上面说的3个甲方为例：这里要创建三个不同的开发/打包环境。uniapp扩展配置用法项目根目录中创建package.json文件（如果已经存在，忽略这一步）在根目录中执行npm init创建package.json文件在package.json文件中添加uni-app节点例如：/*** package.json其它原有配置* 拷贝代码后请去掉注释！*/"title": "兴平市项目","env": {//UNI_PLATFORM 基准平台。
uni-app 多端开发
最新发布
yolo
04-20 1154
uniapp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uniapp H5、小程序、APP端自定义不同运行环境（开发、测试、生产）、自定义条件编译平台、以及动态修改manifest.json值讲解
pixle的博客
11-24 7737
企业项目开发流程上一般都要配置多个运行环境（不同的服务器请求地址）。不同环境有不同用途，主要用于区分开发、测试、上线，对应的环境称为开发环境、测试环境、生产环境。实际开发中经常要在不同环境进行联调或者打包，对于uniapp每次都要手动修改服务请求地址很是麻烦，有什么方法能实现按需运行按需打包呢，答案是——自定义条件编译平台HBuildex默认编译平台例如有H5端、小程序端、APP端,像小程序端细分还有微信小程序，钉钉小程序等，不同编译平台我们可以用条件编译来指定特殊代码运行在哪种平台上。
uniApp：环境搭建及配置
孤安先生的博客，作者主站正在重构中，敬请期待！
07-02 7019
项目结构说明pages 目录所有的页面的存放目录static 目录静态资源目录unpackage 目录打包文件，存放各个平台的打包文件App.vue项目根组件，页面的入口文件main.js项目入口文件，主要作用是初始化 vue 实例并使用需要的插件配置打包的文件，指定应用的名称、图标、权限等pages.json设置项目页面的存放路径和窗口外观uni.scssuni-app 内置常用的变量页面文件遵循Vue 单文件组件（SFC）规范。组件标签靠近小程序规范，详见。
uniapp中配置开发环境和生产环境
故里2130
02-04 3728
uniapp在开发的时候，可以配置多种环境，用于自动切换IP地址，用HBuilder X直接运行的就是开发环境，用HBuilder X发布出来的，就是生产环境。需要在根目录中，自己加上这个文件，但是这个a.js的内容就不是上面的内容了，因为此处就把a.js当做静态的文件，需要修改成直接赋值的内容。也可以直接把IP地址写死，然后直接访问JSON文件的内容也行，使用的时候，随时都可以进行修改。上面的操作，只能在开发环境下使用，肯定没有问题的，当我们发行的时候。将会生成静态的文件，此时刚才的a.js就没有了。
uniapp 打包h5，自定义环境变量
拿回忆下酒
03-08 5511
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 uniapp借助HBuilderX可视化工具，可以进行开发、打包、上线等操作 发行视图 该图片分别有APP、小程序、H5的打包选项，正常操作就好(官网都有具体教程~) 环境判断 根据研发、生产 不同环境，一些判断、展示 都会有不同，例如：api域名链接等等，那么如何进行判断呢？ 这里我们可以
cxl-uniapp-template:自用的uniapp的快速开发脚手架
04-07
10. **环境变量（env）**：不同环境下的配置文件，例如开发环境（dev）、生产环境（prod）。 通过这个模板，开发者可以直接利用已有的配置和组件，快速创建出具备基本功能的新项目，同时可以根据自身需求进行调整和...
uni-app跨端开发微信小程序之HBuilderX项目实现多环境开发
yilingsj的博客
05-04 2359
由于市场的需求不断变化，原有的开发环境和生产环境已经无法满足需求，多环境开发已经是越来越多的公司要面临的问题。本文先介绍如何将HBuilderX创建的uni-app项目转换成vue-cli项目，紧接着通过cross-env实现多环境的配置，最后通过配置文件和git分支实现不同环境下不同需求的多变开发。
百度百科小程序 基于uniapp开发的zblog多端小程序开源源码
09-30
### 百度百科小程序：基于uniapp开发的ZBlog多端小程序开源源码 #### 一、项目背景与概述 百度百科小程序是一个基于uniapp框架开发的多端小程序项目，适用于ZBlog博客系统。该开源项目旨在帮助用户快速构建一个跨...
uni-app项目配置公共服务器域名
青衫折扇的博客
05-13 5985
在项目根目录创建一个config文件夹主要放一些项目公共配置管理 在config文件夹下创建一个index.config.js文件 const CONFIG = { // 开发环境配置 development: { assetsPath: '/static', // 静态资源路径 baseUrl: '', // 后台接口请求地址 hostUrl: '', // H5地址(前端运行地址) websocketUrl: '', // websocket服务端地址 weixinAppI
uni-app开发环境和线上环境地址
weixin_46211267的博客
12-14 1262
if(process.env.NODE_ENV === ‘development’){ console.log(‘开发环境’) }else{ console.log(‘生产环境’) }
uni-app自定义多环境配置，动态修改appid
热门推荐
weixin_43180359的博客
08-17 1万+
在企业级项目开发中，一般使用不同的打包命令改变环境变量解决不同环境各种变量需要手动修改的问题，比如接口请求地址，不同环境的请求路径前缀都是不同的。变量对象中添加的是需要根据不同环境配置的变量，比如后端服务请求地址，小程序。但在很多企业中，可能就2个环境并不能满足实际场景，同时在开发微信小程序时，测试和生产都是不同的。一般小程序也就测试和生产两个环境，环境太多都要重新申请账号也麻烦。扩展节点，实现自定义条件编译平台，让每种编译具有不同环境标识。再扩展vite.config.js配置文件，用环境标识判断重写。
uniapp打包成H5部署到服务器教程
祈澈菇凉
07-06 8880
当前端uniapp写的项目开发完成的时候，需要将页面打包出来，生成H5的静态文件，部署在服务器上，通过服务器链接地址，就可以直接在手机上点开访问 了。 在网上看了一圈，好像没有找到十分详细的教程，这里稍微详细的记录了一下，uniapp打包成H5部署到服务器教程。 步骤如下： 1：点击菜单栏发行，点击选择网站-H5手机版， 2：在网站域名这一栏填写，网站域名，例如www.xxx.co...
vue、react、uniapp配置全局域名、环境变量NODE_ENV、--mode区分开发环境和正式环境
刻痕
01-05 3684
前端项目开发，不同项目环境使用不同的api接口域名（或ip）。不需要通过反复注释代码来解决接口环境问题。 ## 方法一：根据 window.location.host ```javascript const baseURL = window.location.host == 'url01' ? 'url01' : 'url02'; // 建议：url01是正式环境，url02是测试环境或者本地调开发用（有预生产环境的再继续写） ``` ## 方法二：根据 process.env.NODE_ENV（需
uni-app跨平台开发心得
weixin_73974279的博客
06-11 930
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司正是看到了这些问题，因此决心打造一款终极的跨平台解决方案，此时，uni-app就应运而生，Uni-app的出现使得开发者可以使用同一套代码，快速地部署到多个平台，提高了开发效率和降低了开发成本。遵循 Vue.js 官方的代码规范，保持代码风格的统一性。
uniapp 创建 跨域、封装请求、区分环境
Komorebi的博客
03-05 2724
uniapp 创建项目，设置跨域、封装请求、区分运行环境并全局引用 2. 建立跨域 — proxy 3. 封装api方法，注册全局 — $request 创建 requset.js文件 在main.js文件中，引入注册挂载 $request 调用接口请求注意，封装的返回值时promise数值，需要做对应的处理—async /await 4. 本地运行、打包 — 区分对应环境config，并注册全局 创建package.json文件
uniapp 网络请求跨域CORS
02-16
### 处理 UniApp 中的 CORS 跨域问题 #### 服务器端设置 CORS 为了使客户端能够成功发送跨域请求，服务器端需正确配置CORS。具体来说，在HTTP响应头部加入`Access-Control-Allow-Origin`字段可以指定哪些源被许可访问资源[^1]。 对于所有来源都可信任的情况（仅限开发测试阶段），可以在服务器返回的所有响应中添加如下头部： ```http Access-Control-Allow-Origin: * ``` 然而，在生产环境中推荐只允许特定站点访问，以增强安全性： ```java response.setHeader("Access-Control-Allow-Origin", "https://example.com"); ``` 此外，还需考虑其他必要的CORS相关头部，比如支持的方法和自定义请求头等： ```java // 支持GET, POST, PUT, DELETE 方法 response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE"); // 允许携带认证信息(Credentials) response.setHeader("Access-Control-Allow-Credentials", "true"); // 预检请求的有效期(秒)，减少重复预检次数 response.setHeader("Access-Control-Max-Age", "86400"); // 允许的请求头列表 response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With"); ``` #### 客户端处理方式 尽管主要责任在于服务端实现恰当的CORS政策，但在某些情况下也可以采取措施减轻影响。例如，在本地开发期间利用HBuilderX自带浏览器进行调试能绕过部分限制[^5]。 另外一种常见的做法是在应用内部署代理服务器，将外部API调用重定向到同一域名下，以此规避直接的跨域难题。这种方式适用于不想修改现有后端逻辑的情形。 #### 注意事项 当存在前置过滤器或拦截机制时，务必确保它们不会意外中断带有`OPTIONS`方法类型的预检请求(pre-flight requests)[^4]。这类特殊请求用于确认实际请求是否安全合法执行之前获得目标服务器授权。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值