perf: 迁移项目至Vite构建工具，更新依赖和配置

2025-07-28 09:46:28 +08:00
parent 11e617adc9
commit 2a38aed1f7
17 changed files with 1094 additions and 1329 deletions
--- a/src/api/base-service.ts
+++ b/src/api/base-service.ts
@@ -1,81 +1,100 @@
-/*
- * @Description: {{ByRuin}}
- * @Version: 2.0
- * @Author: Ruin 🍭
- * @Date: 2022-01-25 17:48:13
- * @LastEditors: 刘引
- * @LastEditTime: 2022-01-25 17:52:39
- */
-/* 1.引入文件 */
-import axios from 'axios' //引入 axios库
-// @ts-ignore
-import qs from 'qs' //引入 node中自带的qs模块（数据格式转换）
-/* 2.全局默认配置 */
-let baseURL
-let process: any
-// 判断开发环境（一般用于本地代理）
-if (process.env.NODE_ENV === 'development') {
-  // 开发环境
-  baseURL = 'http://www.liulongbin.top:3006' // 你设置的本地代理请求（跨域代理），下文会详细介绍怎么进行跨域代理
-} else {
-  // 编译环境
-  if (process.env.type === 'test') {
-    // 测试环境
-    baseURL = 'http://www.liulongbin.top:3006'
-  } else {
-    // 正式环境
-    baseURL = 'http://www.liulongbin.top:3006'
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
+import { DialogPlugin } from 'tdesign-vue-next'
+// 获取浏览器中的url地址和端口号并拼接
+/* import { config } from 'public/config.js'
+const getBaseUrl = () => {
+  let baseUrlData = ''
+  if (process.env.NODE_ENV === 'development') {
+    baseUrlData = config.baseUrl
+  } else if (process.env.NODE_ENV === 'production') {
+    baseUrlData = 'http://10.0.0.88:3000/api'
+  }
+  return baseUrlData
+} */
+// 创建一个新的axios实例
+const instance: AxiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_BASE_API,
+  timeout: 60000,
+  withCredentials: false,
+  headers: {
+    'Content-Type': 'application/json'
  }
-}
-// 配置axios的属性
-axios.defaults.timeout = 6000 // 请求超时时间1分钟
-axios.defaults.baseURL = baseURL // 你的接口地址
-axios.defaults.responseType = 'json'
-axios.defaults.withCredentials = false //是否允许带cookie这些
-/*你也可以创建一个实例，然后在实例中配置相关属性，此方法和上面的方法一样，写法不同，怎么用随个人
- *喜好，我比较喜欢用这种方法，如下：
- */
-const Axios = axios.create({
-  baseURL: baseURL, // 后台服务地址
-  timeout: 60000, // 请求超时时间1分钟
-  responseType: 'json',
-  withCredentials: false // 是否允许带cookie这些
 })
-/* 3.设置拦截器 */
-/*如果不是用创建实例的方式配置，那么下面的Axios都要换成axios,也就是文件开头你用import引入axios
-时定义的变量*/
-Axios.interceptors.request.use(
-  (config) => {
-    //发送请求前进行拦截
-    //  可在此处配置请求头信息
-    // config.headers["appkey"] = "...";
-    // config.headers["token"] = "...";
-    if (config.method == 'post') {
-      /*数据转换: axios post方式默认是json格式提交数据，如果使用application/x-www-form-urlencoded数据格式提交，要用qs.stringify()进行转换,个人建议不在拦截器中全局配置，因为不够灵活，还有一点是，如果
-设置了重新请求的配置，那么重新请求时，请求体中的config里面的传参就会被再次进行qs.stringify()转
-换，会使得参数丢失，造成请求失败。*/
-      config.data = qs.stringify(config.data)
-    }
+
+// 请求拦截器
+instance.interceptors.request.use(
+  (config: any) => {
+    // 在发送请求之前做些什么
+    // 例如，添加token到请求头
+    // const token = localStorage.getItem('token');
+    // if (token) {
+    //   config.headers.Authorization = `Bearer ${token}`;
+    // }
    return config
  },
-  (error) => {
-    //console.log("错误的传参", 'fail');
+  (error: any) => {
+    // 对请求错误做些什么
    return Promise.reject(error)
  }
 )
-Axios.interceptors.response.use(
-  (res) => {
-    //请求响应后拦截
-    if (res.status == 200) {
-      // 对响应数据做些事
-      //alert("提交成功")
-      return Promise.resolve(res)
+
+// 响应拦截器
+instance.interceptors.response.use(
+  (response: AxiosResponse) => {
+    // 对响应数据做点什么
+    console.log(process.env.NODE_ENV, '变量')
+
+    const data = response.data
+
+    // 判断接口返回的 Message 字段是否为 Success
+    if (data && data.Message !== 'Success') {
+      // 如果不是 Success，则将请求视为失败
+      const confirmDia = DialogPlugin({
+        header: '错误',
+        body: `${JSON.stringify(data)}`,
+        confirmBtn: '确定',
+        cancelBtn: null,
+        onConfirm: ({ e }) => {
+          confirmDia.hide()
+        }
+      })
+      return Promise.reject({
+        response: {
+          status: 200,
+          data: data,
+          message: JSON.stringify(data) || '请求失败'
+        }
+      })
    }
-    return res
+
+    // 如果是 Success，则返回数据
+    return data
  },
-  (error) => {
-    //alert("网络异常!") 404等问题可以在这里处理
+  (error: any) => {
+    // 对响应错误做点什么
+    if (error.response) {
+      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
+
+      console.error('请求错误:', error.response.status, error.response.data)
+    } else if (error.request) {
+      // 请求已经发出，但没有收到响应
+
+      console.error('网络错误:', error.request)
+    } else {
+      // 在设置请求时发生了一些事情，触发了一个错误
+      console.error('错误:', error.message)
+    }
+    const confirmDia = DialogPlugin({
+      header: '错误',
+      body: `${JSON.stringify(error)}`,
+      confirmBtn: '确定',
+      cancelBtn: null,
+      onConfirm: ({ e }) => {
+        confirmDia.hide()
+      }
+    })
    return Promise.reject(error)
  }
 )
-export default Axios
+
+export default instance
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,20 +1,23 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-01-25 16:22:24
+ * @LastEditors: 刘引 liu.yin.work@foxmail.com
+ * @LastEditTime: 2023-08-01 15:54:28
+ */
 import { createApp } from 'vue'
 import router from './router/index' //引入vue-router
 import App from './App.vue'
 import { createPinia } from 'pinia'
-import Foot from '@/components/Foot.vue'
-import Head from '@/components/Head.vue'
-import ElementPlus from 'element-plus'
-import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-import 'element-plus/dist/index.css'
+
+import TDesign from 'tdesign-vue-next'
+import 'tdesign-vue-next/es/style/index.css'
 import 'normalize.css/normalize.css'
 // 挂载到app上
 createApp(App)
  .use(router)
  .use(createPinia())
-  .use(ElementPlus, {
-    locale: zhCn
-  })
-  .component('Foot', Foot)
-  .component('Head', Head)
+  .use(TDesign)
+
  .mount('#app')
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -6,24 +6,12 @@
 * @LastEditors: 刘引
 * @LastEditTime: 2022-03-11 14:26:24
 */
-import path from 'node:path/win32'
+
 import { createRouter, createWebHashHistory } from 'vue-router'
 const routes = [
  {
    path: '/',
-    component: () => import('@/views/index.vue'),
-    children: [
-      {
-        path: '/',
-        component: import('@/views/index.vue'),
-        children: [{ path: '/', component: import('@/views/index.vue') }]
-      }
-    ]
-    // redirect: "/index",
-  },
-  {
-    path: '/user',
-    component: () => import('@/views/user/index.vue')
+    component: () => import('@/views/index.vue')
  }
 ]

@@ -32,4 +20,3 @@ const router = createRouter({
  routes
 })
 export default router
-// 我感觉
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -8,7 +8,7 @@
 */
 import { defineStore } from 'pinia' // 定义容器

-export let useMain = defineStore('useStore', {
+export let useStore = defineStore('useStore', {
  /**
   * 存储全局状态
   * 1.必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="root-home">
    <p>我是home组件</p>
-    <el-button>按钮</el-button>
+
    <news></news>
  </div>
 </template>
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,13 +1,14 @@
 <template>
  <Head></Head>
-  <div>根组件{{ store.count }}</div>
+  <div @click="store.count++">根组件{{ store.count }}</div>
+  <t-button>测试</t-button>
  <Foot></Foot>
 </template>

 <script setup lang="ts">
 import { reactive, onMounted, watch } from 'vue'
-import { useMain } from '@/store'
-const store = useMain()
+import { useStore } from '@/store'
+const store = useStore()
 </script>

 <style scoped lang="scss"></style>
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -9,7 +9,6 @@
 <template>
  <div class="root-home">
    <news></news>
-    <el-button @click="changeData()">更改值了</el-button>
    <h1>写一点demo玩一玩</h1>
  </div>
 </template>