uniapp开发指南

项目创建和配置

uniapp的项目使用cli方式创建能获得更大的自由度。创建和配置的步骤均来自于官方教程

项目创建

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

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

先安装一次依赖
```
npm install
```

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

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

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

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

运行测试

配置跨域代理（vue3+vite）

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

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/, '')
			}
		}
	}
});

说明：

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

参考

*　在uniapp Vue3版本中如何解决web/H5网页浏览器跨域的问题 *　【彻底搞懂】vite proxy如何解决跨域问题

环境配置分离

按照如下格式，在package.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对象

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

参考

uniapp指南.md 3.2 KB Histórico Raw

uniapp开发指南

项目创建和配置

配置跨域代理（vue3+vite）

环境配置分离

uniapp指南.md 3.2 KB

Histórico Raw