PunchSettle-MiniProgram

技术文档

框架：uniapp

版本：vue3 + hbuilder 4.29

待办列表

• 前端样式和使用细节优化
• uniapp环境配置分离
• 前端开发
• 前端原型图设计

全局变量

变量	描述
BASE_API_URL	后端API地址

配置跨域代理（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/, '')
			}
		}
	}
});

说明：

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

参考

*　在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官方文档-package.json
• uniapp + vue3 + vite 环境变量配置
• uniapp-hbuilderX创建 自定义多环境配置，动态修改appid