当前位置:   article > 正文

uniapp 微信小程序多环境配置及使用_uniapp 环境变量

uniapp 环境变量

前后端分离开发模式中,无论前后端都有可能区分不同的环境配置,开发环境(dev)、测试环境(test)、线上生产环境(prod)等,不同环境的设置,后端请求api地址等不同,那么在小程序如何设置多环境配置呢?

定义其他的环境变量 

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

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

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

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

补充

 基于评论里的小伙伴提出在微信开发者工具中点击上传后域名问题:

如果你运行的是开发版或者是测试版,而你线上也就是你在微信公众平台配置域名是正式的,这时候你想上传正式的包,你应该切换成微信小程序——正式版运行到微信开发者工具在点击上传按钮进行打包上传

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

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

  1. {
  2. "uni-app": {
  3. "scripts": {
  4. "dev": {
  5. "title": "微信小程序——开发版",
  6. "env": {
  7. "ENV_TYPE": "dev",
  8. "UNI_PLATFORM": "mp-weixin",
  9. "VUE_APP_BASE_URL": "http://127.0.0.1:8080/"
  10. }
  11. },
  12. "test": {
  13. "title": "微信小程序——测试版",
  14. "env": {
  15. "ENV_TYPE": "test",
  16. "UNI_PLATFORM": "mp-weixin",
  17. "VUE_APP_BASE_URL": "http://test.domain/"
  18. }
  19. },
  20. "pro": {
  21. "title": "微信小程序——正式版",
  22. "env": {
  23. "ENV_TYPE": "pro",
  24. "UNI_PLATFORM": "mp-weixin",
  25. "VUE_APP_BASE_URL": "http://pro.domain/"
  26. }
  27. }
  28. }
  29. },
  30. "name": "xm-uni-app",
  31. "version": "1.0.0",
  32. "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**}",
  33. "main": "main.js",
  34. "scripts": {
  35. "test": "echo \"Error: no test specified\" && exit 1"
  36. },
  37. "repository": {
  38. "type": "git",
  39. "url": ""
  40. },
  41. "keywords": [],
  42. "author": "",
  43. "license": "ISC"
  44. }

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

vue2版本中使用

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

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

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

vue3 vite版中使用

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

  1. {
  2. "uni-app": {
  3. "scripts": {
  4. "dev": {
  5. "title": "微信小程序——开发版",
  6. "env": {
  7. "ENV_TYPE": "dev",
  8. "UNI_PLATFORM": "mp-weixin",
  9. "VITE_BASE_API": "http://127.0.0.1:8080/"
  10. }
  11. },
  12. "test": {
  13. "title": "微信小程序——测试版",
  14. "env": {
  15. "ENV_TYPE": "test",
  16. "UNI_PLATFORM": "mp-weixin",
  17. "VITE_BASE_API": "http://test.domain/"
  18. }
  19. },
  20. "pro": {
  21. "title": "微信小程序——正式版",
  22. "env": {
  23. "ENV_TYPE": "pro",
  24. "UNI_PLATFORM": "mp-weixin",
  25. "VITE_BASE_API": "http://pro.domain/"
  26. }
  27. }
  28. }
  29. }
  30. }

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

  1. // 导出的环境请求地址
  2. //本地环境
  3. const dev = {
  4. ENV: "dev",
  5. VITE_BASE_API: "http://127.0.0.1:8080/dev-api",
  6. };
  7. //正式环境
  8. const pro = {
  9. ENV: "pro",
  10. VITE_BASE_API: "https://xxx/prod-api",
  11. };
  12. //测试环境
  13. const test = {
  14. ENV: "test",
  15. VITE_BASE_API: "https://xxx/test-api",
  16. };
  17. export default {
  18. dev,
  19. test,
  20. pro,
  21. };

 在vite.config.js添加配置

  1. import { defineConfig } from "vite";
  2. import uni from "@dcloudio/vite-plugin-uni";
  3. import ENV_CONFIG from "./utils/envConfig.js";
  4. import { resolve } from "path"; // 导入 path 模块,帮助我们解析路径
  5. export default defineConfig(() => {
  6. return {
  7. server: {
  8. port: "3002",
  9. },
  10. resolve: {
  11. alias: {
  12. "@": resolve(__dirname, "/src"),
  13. },
  14. },
  15. plugins: [uni()],
  16. define: {
  17. "process.env.config": ENV_CONFIG, //配置一
  18. 'process.env': process.env, //配置二
  19. },
  20. };
  21. });

 使用方式

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

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/正经夜光杯/article/detail/788561
推荐阅读
相关标签
  

闽ICP备14008679号