uniapp vue3.2+ts h5端分环境打包

根目录创建 package.json文件

复制代码
{
  "name": "项目名称",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "uni-app": {
    "scripts": {
      "uat-h5": {
        "title": "uat-h5",
        "env": {
          "UNI_PLATFORM": "h5"
        },
        "define": {
          "UAT-ENV": true
        }
      },
      "prod-h5": {
        "title": "prod-h5",
        "env": {
          "UNI_PLATFORM": "h5"
        },
        "define": {
          "PROD-ENV": true
        }
      },
      "dev-h5": {
        "title": "dev-h5",
        "env": {
          "UNI_PLATFORM": "h5"
        },
        "define": {
          "dev-ENV": true
        }
      }
    }
  },
  "dependencies": {
    "qrcode": "^1.5.3"
  }
}
define为环境标识,建议大写
title为环境名,出现在打包列表
UNI_PLATFORM为打包平台

创建env.uat.ts、env.prod.ts、env.dev.ts文件

复制代码
const env = {
	restHost:'http://xxx', // api
	gameUrl:'http://xxx', // 游戏url
}
export default {
	env
}

创建env.ts文件

复制代码
import Prod from './env.prod'
import Uat from './env.uat'
import Dev from './env.dev'

//api环境多的话 可以再创建文件引入

//以下是uniapp判断不同环境引入不同配置文件
/*  #ifdef  UAT-ENV */
export const environment =  Uat.env
/*  #endif  */

/*  #ifdef  PROD-ENV */
export const environment =  Prod.env
/*  #endif  */

/*  #ifndef  UAT-ENV || PROD-ENV */
export const environment =  Dev.env
/*  #endif  */

api封装文件引入env.ts文件 api封装时调用

复制代码
import {environment} from '@/envList/env'
const request = (url,data,method) => {
	const token = uni.getStorageSync('token');
	let header = {
		Token: token,
		'Content-Type':'application/json; charset=utf-8'
	}
	return new Promise ((resolve,reject) => {
		uni.showLoading({
			title: "Loading..."
		});
		uni.request({
			url:environment.restHost+url,
			data:data,
			header:header,
			method:method,
			timeout: 30000,
			success(res) {
				uni.hideLoading();
				// token refresh
				if(res.header['new-token']) {
					uni.setStorageSync('token',res.header['new-token'])
				}
				if (res.data.code == 200) {
					resolve(res.data)
				}else{
					reject(res.data);
					uni.showToast({
						title: res.data.error.msg,
						icon:"error",
						duration:2000
					});
				}
			},
			fail(err) {
				reject(err);
				uni.showToast({
					title: 'error',
					icon:"error",
					duration:2000
				});
			},
			complete() {
				uni.hideLoading();
			}
		})
	})
}
class Http {
	get = function(url,data) {
		return request(url,data,'GET')
	}
	post = function(url,data) {
		return request(url,data,'POST')
	}
}
const http = new Http()
export default{
	http
}
相关推荐
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq3 天前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app