uniapp微信小程序多环境配置以及使用教程

更新时间：2023年05月17日 16:40:36 作者：我总是词不达意

前后端分离开发模式中,无论前后端都有可能区分不同的环境配置,下面这篇文章主要给大家介绍了关于uniapp微信小程序多环境配置以及使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

定义其他的环境变量

之前搞vue的时候可以通过 .env的方式配置开发测试和线上需要的环境变量

uniapp中只有 development 和 production 这两个条件

vu2版本通过process.env.NODE_ENV可以获取到

我如果需要其他的变量怎么办呢：如测试 test等

通过官网我们可以看到示例

在根目录下的 package.json文件中（没有的话通过 npm init -y初始化创建一个）

{
  "uni-app": {
    "scripts": {
      "dev": {
        "title": "微信小程序——开发版",
        "env": {
          "ENV_TYPE": "dev",
          "UNI_PLATFORM": "mp-weixin",
          "VUE_APP_BASE_URL": "http://127.0.0.1:8080/"
        }
      },
      "test": {
        "title": "微信小程序——测试版",
        "env": {
          "ENV_TYPE": "test",
          "UNI_PLATFORM": "mp-weixin",
          "VUE_APP_BASE_URL": "http://test.domain/"
        }
      },
      "pro": {
        "title": "微信小程序——正式版",
        "env": {
          "ENV_TYPE": "pro",
          "UNI_PLATFORM": "mp-weixin",
          "VUE_APP_BASE_URL": "http://pro.domain/"
        }
      }
    }
  },
  "name": "xm-uni-app",
  "version": "1.0.0",
  "description": "{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

保存之后，在HBuilderX中会显示在运行/发行菜单中

vue2版本中使用

直接通过process.env打印的时候会看不到

直接通过process.env.变量名使用就行

console.log(process.env.VUE_APP_BASE_URL,'获取处于当前开发环境的url');
console.log(process.env.ENV_TYPE,'获取当前处于哪个开发环境');
console.log(process.env,'process.env++++++++++++');

vue3 vite版中使用

在vue3中获取不到process，所以需要一些改造

{
  "uni-app": {
    "scripts": {
      "dev": {
        "title": "微信小程序——开发版",
        "env": {
          "ENV_TYPE": "dev",
          "UNI_PLATFORM": "mp-weixin",
          "VITE_BASE_API": "http://127.0.0.1:8080/"
        }
      },
      "test": {
        "title": "微信小程序——测试版",
        "env": {
          "ENV_TYPE": "test",
          "UNI_PLATFORM": "mp-weixin",
          "VITE_BASE_API": "http://test.domain/"
        }
      },
      "pro": {
        "title": "微信小程序——正式版",
        "env": {
          "ENV_TYPE": "pro",
          "UNI_PLATFORM": "mp-weixin",
          "VITE_BASE_API": "http://pro.domain/"
        }
      }
    }
  }
}

在src/utils文件夹下创建envConfig.js

// 导出的环境请求地址
//本地环境
const dev = {
  ENV: "dev",
  VITE_BASE_API: "http://127.0.0.1:8080/dev-api",
};
//正式环境
const pro = {
  ENV: "pro",
  VITE_BASE_API: "https://xxx/prod-api",
};
//测试环境
const test = {
  ENV: "test",
  VITE_BASE_API: "https://xxx/test-api",
};
export default {
  dev,
  test,
  pro,
};

在vite.config.js添加配置

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import ENV_CONFIG from "./utils/envConfig.js";
import { resolve } from "path"; // 导入 path 模块，帮助我们解析路径
export default defineConfig(() => {
  return {
    server: {
      port: "3002",
    },
    resolve: {
      alias: {
        "@": resolve(__dirname, "/src"),
      },
    },
    plugins: [uni()],
    define: {
      "process.env.config": ENV_CONFIG, //配置一
      'process.env': process.env, //配置二
    },
  };
});

使用方式

let baseURL = process.env.config[process.env.UNI_SCRIPT].VITE_BASE_API; //获取处于当前开发环境的url
let evnName = process.env.config[process.env.UNI_SCRIPT].ENV; //获取当前处于哪个开发环境
console.log("baseURL:", baseURL, "++++++++++++++++++++++++");
console.log("envName:", evnName, "++++++++++++++++++++++++");
console.log("evn:", process.env, "++++++++++++++++++++++++");

总结

到此这篇关于uniapp微信小程序多环境配置以及使用的文章就介绍到这了,更多相关uniapp微信小程序多环境内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用JSX实现Carousel轮播组件的方法(前端组件化)
做这个轮播图的组件，我们先从一个最简单的 DOM 操作入手。使用 DOM 操作把整个轮播图的功能先实现出来，然后在一步一步去考虑怎么把它设计成一个组件系统
2021-04-04
JavaScript中代理与反射的用法详解
JavaScript作为一门灵活而强大的语言,提供了代理（Proxy）与反射（Reflect）这两个元编程工具,它们为开发者提供了更深层次的语言控制和操作,在本篇博客中,我们将深入研究代理与反射的概念、用法,以及如何巧妙地结合它们来实现高级的编程技巧,需要的朋友可以参考下
2023-12-12
原生JS实现文件上传
这篇文章主要为大家详细介绍了原生JS实现文件上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
IE FF OPERA都可用的弹出层实现代码
多浏览器的弹出层效果核心代码。需要的朋友可以测试下这个是从正在使用的网站中扒下来的。
2009-09-09
记录微信小程序 height: calc(xx - xx)；无效问题
这篇文章主要介绍了微信小程序 - height: calc(xx - xx)；无效问题，文中给大家扩展介绍下jquery点击添加样式，再次点击移除样式的实例代码,需要的朋友可以参考下
2019-12-12
微信小程序子组件向父组件传值的两种方法
本文介绍了微信小程序中子组件向父组件传值的两种方法,这两种方法都能有效地实现子组件向父组件的数据传递,对于开发微信小程序的开发者来说,掌握这些技巧非常重要,感兴趣的朋友跟随小编一起看看吧
2024-09-09
layui实现三级联动效果
这篇文章主要为大家详细介绍了layui实现三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
基于JS实现文字转语音即文本朗读
这篇文章主要为大家详细介绍了JavaScript如何利用SpeechSynthesis实现文字转语音即文本朗读的功能,感兴趣的小伙伴可以跟随小编一起学习一下
2023-10-10
js与css的阻塞问题详析
JS具有阻塞特性,当浏览器在执行js代码时,不能同时做其它事情,下面这篇文章主要给大家介绍了关于js与css阻塞问题的相关资料,需要的朋友可以参考下
2021-07-07
微信小程序使用radio显示单选项功能【附源码下载】
这篇文章主要介绍了微信小程序使用radio显示单选项功能,涉及针对radio组件事件响应相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
2017-12-12