Kros的博客 Kros的博客
首页
  • CSS
  • 工具
  • Vue
  • js
  • Vue3
  • 算法
  • 折腾笔记
一言
  • 分类
  • 标签
  • 归档
码云

Kros

凡心所向,素履以往,生如逆旅,一苇以航
首页
  • CSS
  • 工具
  • Vue
  • js
  • Vue3
  • 算法
  • 折腾笔记
一言
  • 分类
  • 标签
  • 归档
码云
  • CSS

  • JavaScript

  • 工具

    • git命令行
    • uniapp小程序分包配置
    • VScode使用Todo tree实现待办查看
    • activiti editor添加自定义属性
    • uniapp使用svg
    • windows端口查看及关闭端口
    • uniapp通过wifi无线运行到手机
    • android生成证书文件
    • vscode中显示换行指示线
    • 浏览器console输出自定义样式内容
    • console的非常规用法
    • uniapp App升级更新
    • 从零开始搭建脚手架1
    • vite打包插件上传到npm
    • uniapp使用speech模块遇到的问题
    • HbuilderX使用MuMu模拟器
    • HbuilderX调试app页面元素
    • 前端工程化的理解
    • console log打印obj非实时性数据问题
    • 常见http状态码
    • HbuilderX配置自定义打包环境
    • webpack优缺点
    • axios和ajax的区别
    • 使用docxtemplater导出word文件
    • docxtemplater循环列表数据导出
    • js打开钉钉打卡页面
    • uniapp配置自定义环境变量和条件编译变量
    • 文件上传时的各种二进制数据关系
    • 解决开发过程中的跨域问题
    • vue自定义入口html文件
    • tsParticles局部粒子效果
    • 使用verdaccio搭建私人npm仓库
  • Vue

  • antdv踩坑记录

  • Vue3

  • 前端
  • 工具
kros
2024-04-02

uniapp配置自定义环境变量和条件编译变量

uniapp提供了三种配置环境变量的方式

  • 1、使用vue.config.js配置环境变量
  • 2、使用.env文件配置环境变量
  • 3、使用 package.json配置环境变量

vue.config.js和.env在vue项目中使用非常频繁了这里就不再多说,主要介绍使用package.json来配置环境变量和条件编译变量

首先在根目录下创建package.json文件,参考官方demo 如下配置:

提示

注意:package.json文件不能含有任何注释,否则会编译失败

{
  "uni-app": {
    "scripts": {
      "dev-env": { 
        "title":"测试环境", 
        "env": {
            "UNI_PLATFORM": "h5",  
            "ENV_PARAMS": "dev", 
            "other": ""
         },
        "define": { 
            "DEV_PLATFORM": true 
        }
      },
      "pro-env": {
        "title":"发布环境", 
        "env": {
            "UNI_PLATFORM": "h5", 
            "ENV_PARAMS": "pro", 
            "other": "" 
         },
        "define": { 
            "PRO_PLATFORM": true 
        }
      }
    }    
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在scripts下可配置多个环境以及相应的名称、环境变量参数等,配置后即可在代码中使用ENV_PARAMS等环境变量

if (process.env.ENV_PARAMS === 'dev') {
  // 测试环境
} else if(process.env.ENV_PARAMS === 'pro') {
  // 发布环境
}
1
2
3
4
5

同时我们也可以配置define字段,该字段中配置的变量可用于条件编译使用,比如上面配置的DEV_PLATFORM和PRO_PLATFORM参数

// #ifdef DEV_PLATFORM
  // 测试环境操作
// #endif
// #ifdef PRO_PLATFORM
  // 发布环境操作
//  #endif
1
2
3
4
5
6

需要注意的是以上配置的环境变量和条件编译在本地运行环境是不生效的,需要在运行 > 对应环境 或发行 > 自定义发行中可以看到对应的配置的环境,点击对应环境运行或打包后的代码才能使用以上配置

运行 自定义发行

上次更新: 2025/09/05, 8:09:00
js打开钉钉打卡页面
文件上传时的各种二进制数据关系

← js打开钉钉打卡页面 文件上传时的各种二进制数据关系→

最近更新
01
Find the next perfect square
09-05
02
Regex validate PIN code
09-05
03
Find the odd int
09-05
更多文章>
Theme by Vdoing | Copyright © 2020-2025 kros king
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
icon-heart-o icon-heart icon-infinity icon-pause icon-play link next prev