# 技术文档



框架：uniapp

版本：vue3 + hbuilder 4.29



## 全局变量

| 变量         | 描述        |
| ------------ | ----------- |
| BASE_API_URL | 后端API地址 |



## 配置跨域代理（vue3+vite）

配置代理实质是配置vite，因此在根目录下创建一个vite.config.js文件，并添加如下配置

```javascript
import {
	defineConfig
} from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
	plugins: [uni()],
	server: {
		proxy: {
			'/api': {
				target: 'http://localhost:8080',
				changeOrigin: true,
				rewrite: (path) => path.replace(/^\/api/, '')
			}
		}
	}
});
```

说明：

1. 可以参考uniapp官网的vite.config.js，和vite官网的对应配置
2. 配置中的proxy代理中的key（'/api'），**一定要留意项目的文件或者路径不要要相同名称的**，否则在浏览器发起请求文件资源的时候就会发生替换导致项目出错加载不了页面



参考

*　[在uniapp Vue3版本中如何解决web/H5网页浏览器跨域的问题](https://blog.csdn.net/qq_18798149/article/details/135544336)
*　[【彻底搞懂】vite proxy如何解决跨域问题](https://segmentfault.com/a/1190000043775780)



## 环境配置分离

按照如下格式，在package.json文件中写入变量即可全局使用即可

```json
{
	"uni-app": {
		"scripts": {
			"h5-dev": {
				"title": "H5 开发环境",
				"browser": "chrome",
				"env": {
					"UNI_PLATFORM": "h5",
					"NAME": "development",
					"BASE_API_URL": "http://loclhost:8080"
				}
			},
			"h5-sit": {
				"title": "H5 sit-测试环境",
				"browser": "chrome",
				"env": {
					"UNI_PLATFORM": "h5",
					"NAME": "development",
					"BASE_API_URL": "http://192.168.1.41:8080"
				}
			}
		}
	}
}
```

使用方法，运行访问process.env对象

```javascript
// 运行对应环境后，即可获得对应的配置，例：http://loclhost:8080
process.env.BASE_API_URL
```





参考

* [uniapp官方文档-package.json](https://uniapp.dcloud.net.cn/collocation/package.html)
* [uniapp + vue3 + vite 环境变量配置](https://blog.csdn.net/MockingBHM/article/details/138125840)
* [uniapp-hbuilderX创建 自定义多环境配置，动态修改appid](https://juejin.cn/post/7283311024978821177)