网络请求

.env.development

@@ -5,5 +5,5 @@ VITE_APP_TITLE=里派基础框架
 VITE_APP_ENV='development'
 
 # 开发环境
-VITE_API_BASE='https://dev.api.leapy.cn/merchant/'
+VITE_API_BASE='https://dev.api.leapy.cn/user/'
 VITE_WS_URL='wss://dev.api.leapy.cn/mms'

.env.production

@@ -5,5 +5,5 @@ VITE_APP_TITLE=里派基础框架
 VITE_APP_ENV='production'
 
 # 生产环境
-VITE_API_BASE='https://dev.api.leapy.cn/merchant/'
+VITE_API_BASE='https://dev.api.leapy.cn/user/'
 VITE_WS_URL='wss://dev.api.leapy.cn/mms'

src/App.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import {onLaunch} from "@dcloudio/uni-app";
+import {onLaunch, onError} from "@dcloudio/uni-app";
 
 onLaunch(() => {
   console.log('%c PI %c 里派提供技术支持', 'background:#4caf50;color:#fff;border-radius:3px;', '')
 });
+
+onError((error) => {
+  console.error(`[PI error]: ${error}`);
+})
 </script>
 <style></style>

src/api/index.ts

@@ -0,0 +1,8 @@
+// 小程序不支持动态导入语法
+import auth from './model/auth'
+
+export default {
+    auth
+}
+
+

src/api/model/auth.ts

@@ -0,0 +1,7 @@
+import http from "@/utils/request"
+
+export default {
+    info: async function () {
+        return await http.get("v1/district.code");
+    }
+}

src/config/index.ts

@@ -0,0 +1,22 @@
+export default {
+    // 应用名称
+    APP_NAME: import.meta.env.VITE_APP_TITLE,
+    //接口地址
+    // #ifdef H5
+    API_URL: import.meta.env.VITE_APP_ENV === 'development' ? "/api/" : import.meta.env.VITE_API_BASE,
+    // #endif
+    // #ifndef H5
+    // @ts-ignore
+    API_URL: import.meta.env.VITE_API_BASE,
+    // #endif
+    // websocket
+    WS_URL: import.meta.env.VITE_WS_URL,
+    //请求超时
+    TIMEOUT: 10000,
+    //TokenName
+    TOKEN_NAME: "Authorization",
+    //Token前缀，注意最后有个空格，如不需要需设置空字符串
+    TOKEN_PREFIX: "Bearer ",
+    //请求是否开启缓存
+    REQUEST_CACHE: false,
+}

src/pages/index/index.vue

@@ -7,13 +7,20 @@
   </view>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import {ref} from 'vue'
 import {useI18n} from 'vue-i18n'
+import api from "@/api/index"
 
 const {t, locale} = useI18n()
 const title = ref(t('index.title'))
 
+getInfo()
+
+async function getInfo() {
+  const res = await api.auth.info()
+  console.log(res.data)
+}
 
 </script>
 

src/utils/request.ts

@@ -0,0 +1,84 @@
+import tools from '@/utils/tools'
+import config from "@/config";
+
+uni.addInterceptor('request', {
+    invoke(args) {
+        args.url = config.API_URL + args.url
+        let token = tools.data.get("TOKEN")
+        if (token) {
+            args.header[config.TOKEN_NAME] = config.TOKEN_PREFIX + token
+        }
+        if (!config.REQUEST_CACHE && args.method == 'GET') {
+            args.data = args.data || {}
+            args.data['_'] = new Date().getTime()
+            // 开启缓存
+            args.enableCache = true
+        }
+    },
+    success(response) {
+        if (response.statusCode == 200) {
+            let res = response.data
+            if (res.code == 200) {
+                return Promise.resolve(res)
+            } else if (res.code == 400) { // 操作失败拦截
+                uni.showToast({title: res.msg, duration: 3000, icon: "none"}).then(() => {
+                })
+            } else if (res.code == 500) { // 权限不足拦截
+                uni.showToast({title: res.msg, duration: 3000, icon: "none"}).then(() => {
+                })
+            } else { // 登录失效拦截
+                uni.showToast({title: res.msg, duration: 3000, icon: "none"}).then(() => {
+                })
+            }
+            return Promise.reject(res)
+        } else if (response.statusCode == 404) {
+            uni.showToast({title: "Status:404，正在请求不存在的资源！", duration: 3000, icon: "none"}).then(() => {
+            })
+        } else if (response.statusCode == 500) {
+            uni.showToast({
+                title: response.data.message || "Status:500，服务器发生错误！",
+                duration: 3000,
+                icon: "none"
+            }).then(() => {
+            })
+        } else {
+            uni.showToast({title: "请求错误", duration: 3000, icon: "none"}).then(() => {
+            })
+        }
+        return Promise.resolve(response)
+    }
+})
+
+const http = {
+    get: function (url: string, params = {}, config = {}) {
+        return new Promise((resolve, reject) => {
+            uni.request({
+                url: url,
+                method: 'GET',
+                data: params,
+                ...config
+            }).then((response) => {
+                resolve(response)
+            }).catch((error) => {
+                reject(error)
+            })
+        })
+    },
+    post: function (url: string, params = {}, config = {}) {
+        return new Promise((resolve, reject) => {
+            uni.request({
+                url: url,
+                method: 'POST',
+                data: params,
+                dataType: 'json',
+                ...config
+            }).then((response) => {
+                resolve(response)
+            }).catch((error) => {
+                reject(error)
+            })
+        })
+    },
+}
+
+export default http

vite-env.d.ts

@@ -0,0 +1,43 @@
+// 如果使用 Vite 4+ 推荐官方类型
+interface ImportMeta {
+	readonly env: ImportMetaEnv
+	readonly glob: (
+		pattern: string,
+		options?: { eager?: boolean; import?: string, query?: string }
+	) => Record<string, any>
+}
+
+interface ImportMetaEnv {
+	readonly VITE_API_BASE: string
+	readonly VITE_APP_TITLE: string
+	readonly VITE_WS_URL: string,
+	readonly VITE_APP_ENV: string
+}
+
+interface Document {
+	webkitIsFullScreen: boolean;
+	webkitFullscreenElement: Element | null;
+	mozFullScreen: boolean;
+	msFullscreenElement: Element | null;
+	msExitFullscreen: () => void;
+	mozCancelFullScreen: () => void;
+	webkitExitFullscreen: () => void;
+}
+
+declare module '*.vue' {
+	import type { DefineComponent } from 'vue'
+	const component: DefineComponent<{}, {}, any>
+	export default component
+}
+
+declare module '@/*' {
+	import { DefineComponent } from 'vue'
+	const component: DefineComponent<{}, {}, any>
+	export default component
+}
+
+declare module '@assets/*' {
+	import { DefineComponent } from 'vue'
+	const component: DefineComponent<{}, {}, any>
+	export default component
+}

vite.config.ts

@@ -1,7 +1,21 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import uni from "@dcloudio/vite-plugin-uni";
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({mode, command}) => {
-  plugins: [uni()],
+  const env = loadEnv(mode, process.cwd())
+  const {VITE_API_BASE} = env
+  return {
+    plugins: [uni()],
+    server: {
+      port: 6811,
+      proxy: {
+        '/api': {
+          target: VITE_API_BASE,
+          changeOrigin: true,
+          rewrite: (p) => p.replace(/^\/api/, '')// 正则删除 "/api"
+        }
+      }
+    }
+  }
 });