Skip to content

Commit

Permalink
feat: 自定义变量
Browse files Browse the repository at this point in the history
  • Loading branch information
clh committed Dec 30, 2024
1 parent 38e7993 commit 44281e8
Show file tree
Hide file tree
Showing 8 changed files with 125 additions and 3 deletions.
18 changes: 15 additions & 3 deletions docs/.vitepress/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,20 +40,28 @@ export default {
],
},
{
text: "小程序",
text: "Uniapp跨端开发",
items: [
{
text: "包体积优化",
link: "/front/mini/packageSize/",
},
{
text: "Uniapp踩坑合集",
link: "/front/mini/uniapp/",
text: "自定义编译变量及环境变量",
link: "/front/mini/var/",
},
{
text: "从Hbuilder迁移到命令行编译",
link: "/front/mini/hb2cli",
},
{
text: "Uniapp对接微信原生SDK",
link: "/front/mini/thirdSDK/",
},
{
text: "Uniapp踩坑合集",
link: "/front/mini/trap/",
},
],
},
{
Expand Down Expand Up @@ -87,6 +95,10 @@ export default {
{
text: "常用操作指令",
items: [
{
text: "Git",
link: "/others/operation/git/",
},
{
text: "MarkDown",
link: "/others/operation/md/",
Expand Down
1 change: 1 addition & 0 deletions docs/front/mini/hb2cli/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# 从 HbuilderX 迁移到命令行编译
File renamed without changes.
File renamed without changes
File renamed without changes
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
85 changes: 85 additions & 0 deletions docs/front/mini/var/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
# Uniapp 中自定义环境变量及编译变量

## 前言

在我们进行跨端开发中,基本都会遇到因为环境导致的代码差异需要兼容,比如生产环境和测试环境需要调用不同的接口地址,又比如 H5 和小程序上需要运行不同的交互逻辑

本文主要讨论如何在 Uniapp 中使用自定义的环境变量及条件编译变量,达到一套代码兼容多端多环境的目的

## 环境变量

在 Uniapp 中其实有内置的配置环境变量的方案,[参考地址](https://uniapp.dcloud.net.cn/collocation/package);但是经过亲测后,发现 H5 中是可用的,但是小程序中是不可用的,具体报错如下
![alt text](1735524581039_C1CCC9F1-7EBC-4365-A0DC-59D9360449E0.png)

为了同时兼容两端,我们在此引用三方包 cross-env 来实现需求

### Cross env

#### 简介

cross-env 是一个常用的 npm 包,用于在不同操作系统中设置环境变量,确保在跨平台时环境变量的设置方式一致。它特别有用,因为不同操作系统设置环境变量的方式不同

#### 使用步骤

1. 安装:npm install --save-dev cross-env
2. 配置 script 脚本前加上 cross-env 运行脚本并注入环境变量

配置前

```json
{
"scripts": {
"start": "node server.js"
}
}
```

配置后

```json
{
"scripts": {
"start": "cross-env TEST_VAR=dev node server.js",
"test": "cross-env TEST_VAR=test node server.js"
}
}
```

3.访问环境变量

一般来说,在完成上述配置后,我们便可以通过 process.env.TEST_VAR 来访问到环境变量了,但是 Uniapp 因为编译比较特殊,使用这种办法是访问不到的,而需要通过 vite.config(或者 vue.config)文件来中转

```js
const TEST_VAR = process.env.TEST_VAR;
export default defineConfig({
...,
define: {
TEST_VAR: JSON.stringify(TEST_VAR),
},
});
```

这样就能将 TEST_VAR 作为全局变量去进行使用了

```js
const baseUrlMap = {
dev: "https://dev/api/xx",
test: "https://test/api/xx",
};

export const getBaseUrl = () => {
return baseUrlMap[TEST_VAR];
};
```

## 编译变量

通过上述操作后,我们已经可以通过环境变量来进行一些差异化的适配开发了,那么编译变量又是什么作用呢?

环境变量一般定义在编译时,但是使用在运行时,但是如果我们需要在编译时去判断哪些代码需要在哪个环境下才编译到 dist 里,这个时候环境变量就无法实现了,Uniapp 提供了自定义编译变量来实现目的,[参考文档](https://uniapp.dcloud.net.cn/collocation/package.html)

该文档中有具体的 HbuilderX 编译或者 Cli 编译时如何使用编译变量,在此不再赘述,最终我们将 cross-env 和这个方案相结合,就能同时实现环境变量及编译变量

```json
"dev:h5-dev": "cross-env COMP_ENV=DEV uni -p h5-dev",
```
24 changes: 24 additions & 0 deletions docs/others/operation/git/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Git 常用指令介绍

Git 是一个分布式版本控制工具,它被广泛应用于开源和私有项目的管理中。掌握 Git 的常用指令是每个开发者必备的技能,本文将介绍 Git 中一些常见的操作命令

## 1. 配置操作

```bash
git config --list # 查看当前git的所有配置
git config --global user.name "Your Name" # 设置全局用户名
git config --global user.email "[email protected]" # 设置全局邮箱

git config --global http.proxy http://proxy.example.com:8080 # 设置全局http代理
git config --global https.proxy https://proxy.example.com:8080 # 设置全局https代理

git config --global https."github.com".proxy https://proxy.example.com:8080 # 仅对某个域名进行代理
```

## 2. 初始化及克隆仓库

```bash
git init # 初始化git,创建git目录
git clone https://github.com/dcloudio/uni-ui.git # 克隆仓库

```

0 comments on commit 44281e8

Please sign in to comment.