当前位置: 首页 > article >正文

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://43.139.56.173:8180', // api
	gameUrl:'http://43.139.56.173:8890', // 游戏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
}

http://www.kler.cn/a/155352.html

相关文章:

  • 基于Python+Django+Vue3+MySQL实现的前后端分类的商场车辆管理系统
  • python装饰器的使用以及私有化
  • 链游系统定制化开发:引领游戏产业的新时代
  • activiti5基础和springboot整合
  • 【秋招笔试-支持在线评测】11.13花子秋招(已改编)-三语言题解
  • 程序员年薪百万秘籍(一)
  • Redis基础知识
  • Excel 删除空白行
  • 「C++」位图和布隆过滤器
  • 计算机毕业设计 基于协同推荐的白酒销售管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解
  • 1.1卷积的作用
  • JVM执行引擎以及调优
  • mysql中除了InnoDB以外的其它存储引擎
  • 手写VUE后台管理系统6 - 支持TS声明文件.d.ts
  • 软著项目推荐 深度学习手势识别算法实现 - opencv python
  • git push 报错 error: src refspec master does not match any 解决
  • 视频文件+EasyDarwin做摄像机模拟器模拟RTSP流很方便,还能做成系统服务,方法与流程
  • 浅析HTML中的图片格式
  • 怎么运营网站不受漏洞攻击
  • 公共部门生成式人工智能的未来
  • flink安装与配置-脚本一键安装(超简单)
  • Servlet是什么
  • 配置 Mantis 在 Windows 上的步骤
  • sqli-labs靶场详解(less38-less45)
  • 如何使用PHPUnit编写一个PHP单元测试-简单的代码示例
  • 【LeetCode】每日一题 2023_12_3 可获得的最大点数(前缀和/滑动窗口/贪心)