uniapp+vue3配置环境变量

合集 - 必(54)

1.uniapp+vue3配置环境变量2023-11-30

2.uniapp关于uni.getUserProfile的使用2023-11-303.uniapp有意思的api之openSetting2023-12-024.处理flex布局2023-12-025.uniapp登录板块封装(旧接口getUserInfo)2023-12-036.uniapp获取用户信息2023-12-047.在项目中使用UEditor碰到的几个问题2023-12-048.一维数组转二位数组2023-12-109.如果win报错无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本2023-12-1110.win系统执行脚本报错策略更改无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本2023-12-1211.uniapp去除button的边框2024-01-1012.uniapp中OnShow获取缓存2024-01-1013.之前使用抖音的担保支付，后俩转换成通用的交易方式2024-01-1114.js图片懒加载，在不做分页的情况下的解决方案2024-01-1215.width:100%与width:auto区别2024-01-1516.vue中render函数和h函数2024-01-1517.leetcode1047字符串反复去重（栈）2024-01-1518.由于<textarea>在某些平台上会创建一个原生控件，这可能会导致层级问题，尤其是在安卓设备上。在uni-app中，对于这种情况，通常推荐的解决方案是使用<cover-view>组件来覆盖原生组件，但是这种做法通常用于覆盖地图、视频等原生组件，而不是<textarea>2024-01-2119.记录一次uniapp使用scrollview2024-01-2220.微前端(矩阵项目)代码将单个文件合并到指定分支2024-01-2221.js不同类型比较2024-01-3122.登录后继续浏览之前的页面2024-02-0123.css2024-02-0224.sse2024-02-1825.数组扁平化2024-02-1926.DOMRect对象2024-02-2027.前端三大系列图解释2024-02-2028.js中关于return和if条件处理2024-02-2029.js文字处理两端展示中间省略号2024-02-2030.[popover, select] el-popover内有select的时候在选择后会自动关闭2024-02-2031.说一下flex的属性2024-02-2632.vue3中404路由匹配规则2024-02-2633.shape-outside2024-02-2734.createRange表示文档中的一个范围——用于js判断文字添加省略号情况2024-02-2835.uniapp清除指定key缓存2024-03-0736.vue3+uniapp关于button的open-type无法生效2024-03-1137.uniapp+vue3 使用list触底+下拉2024-03-1138.diff算法vue2024-03-1239.动态修改manifest.json2024-03-1840.记录一下大小写导致的问题2024-03-2041.小程序真机报错errMsg: “hideLoading:fail:toast can‘t be found“ ？2024-03-2542.vscode开发uniapp配置12024-03-2543.渐变颜色css设置2024-03-2944.微信小程序关于小说类使用官方阅读器2024-03-2945.一个简单的伪类选择器2024-03-2946.iframe 高度设置为0时还有占位_iframe占位2024-03-2947.git push所有分支到远程仓库2024-04-0348.输入框连续请求中取消上次请请求2024-04-1249.VS Code侧边栏的“资源管理器”丢了2024-04-1250.css样式相关的惊艳的属性2024-04-1251.千分位分隔函数2024-04-1852.uniapp实现多行文本溢出超过指定行数 展开 收起2024-05-1653.前端如何接收流式数据2024-07-2254.perspective和transform系列属性2024-08-27

收起

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

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

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

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

vue2版本中使用

 在根目录下的 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"
}

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

vue3 vite版中使用

{
  "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, "++++++++++++++++++++++++");