# uniapp开发指南



## 项目创建和配置

uniapp的项目使用cli方式创建能获得更大的自由度。创建和配置的步骤均来自于[官方教程](https://uniapp.dcloud.net.cn/quickstart-cli.html)

1. 项目创建

   ```shell
   # vue3 vite版本
   npx degit dcloudio/uni-preset-vue#vite my-vue3-project
   ```

   注：如果无法使用命令创建则可以根据**官方教程**自己上gitee下载模板来创建项目，即下载后自己重名命即可。

2. 先安装一次依赖

   ```shell
   npm install
   ```

3. 安装uni-ui、sass、sass-loader等依赖

   ```shell
   # 安装sass
   npm i sass -D
   
   # 安装sass-loader
   npm i sass-loader@10.1.1 -D
   
   # 安装uni-ui
   npm i @dcloudio/uni-ui
   ```

4. 配置 `easycom` 规则，让 `npm` 安装的组件支持 `easycom`

   ```json
   // pages.json
   
   {
   	"easycom": {
   		"autoscan": true,
   		"custom": {
   			// uni-ui 规则如下配置
   			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
   		}
   	},
   	
   	// 其他内容
   	pages:[
   		// ...
   	]
   }
   ```

4. 运行测试



## 配置跨域代理（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'），**一定要留意项目的文件或者路径不要要相同名称的**，否则在浏览器发起请求文件资源的时候就会发生替换导致项目出错加载不了页面
3. **跨域配置只对h5生效，在uniapp中的小程序开发是不需要的**



参考

*　[在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)