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

2025-07-28 09:46:28 +08:00
parent 11e617adc9
commit 2a38aed1f7
17 changed files with 1094 additions and 1329 deletions
--- a/.env.dev
+++ b/.env.dev
@@ -1,6 +1,6 @@

 # base api
-VUE_APP_BASE_API = 'http://127.0.0.1:3000/api'
+VITE_BASE_API = '/api'



--- a/.env.prod
+++ b/.env.prod
@@ -1,4 +1,4 @@

 # base api
-VUE_APP_BASE_API = 'http://10.0.0.88:3000/api'
+VITE_BASE_API = '/prod'

--- a/.env.test
+++ b/.env.test
@@ -1,4 +1,4 @@

 # base api
-VUE_APP_BASE_API = 'http://10.0.0.93:3000/api'
+VITE_BASE_API = '/test'

--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {

--- a/components.d.ts
+++ b/components.d.ts
@@ -1,10 +1,11 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}

+/* prettier-ignore */
 declare module 'vue' {
  export interface GlobalComponents {
    Foot: typeof import('./src/components/Foot.vue')['default']
--- a/index.html
+++ b/index.html
@@ -1,10 +1,13 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
+    <title>Vue项目模板</title>
  </head>
  <body>
    <div id="app"></div>
--- a/package.json
+++ b/package.json
@@ -1,35 +1,30 @@
 {
  "name": "vue-frame",
  "version": "0.0.0",
+  "type": "module",
  "scripts": {
-    "dev": "rsbuild dev",
-    "build:dev": "rsbuild build --env-mode dev",
-    "build:test": "rsbuild build --env-mode test",
-    "build:prod": "rsbuild build --env-mode prod",
-    "preview": "rsbuild preview"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
  },
  "dependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
-    "axios": "^1.8.3",
+    "axios": "^1.10.0",
    "dayjs": "^1.11.13",
-    "element-plus": "^2.9.6",
-    "file-saver": "^2.0.5",
    "normalize.css": "^8.0.1",
-    "pinia": "^3.0.1",
+    "pinia": "^3.0.3",
    "qs": "^6.14.0",
-    "vue": "^3.5.13",
-    "vue-router": "^4.5.0",
-    "xlsx": "^0.18.5"
+    "tdesign-vue-next": "^1.15.1",
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1"
  },
  "devDependencies": {
-    "@rsbuild/core": "^1.2.19",
-    "@rsbuild/plugin-sass": "^1.2.2",
-    "@rsbuild/plugin-vue": "^1.0.7",
-    "@types/node": "^22.13.10",
-    "sass": "^1.86.0",
-    "typescript": "^5.8.2",
-    "unplugin-auto-import": "^19.1.1",
-    "unplugin-vue-components": "^28.4.1",
-    "vue-tsc": "^2.2.8"
+    "@types/node": "^24.0.3",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "sass": "^1.89.2",
+    "typescript": "^5.1.6",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-vue-components": "^28.7.0",
+    "vite": "^7.0.5",
+    "vue-tsc": "^3.0.3"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/rsbuild.config.ts
+++ b/rsbuild.config.ts
@@ -1,51 +0,0 @@
-import { defineConfig } from '@rsbuild/core'
-import { pluginVue } from '@rsbuild/plugin-vue'
-import { pluginSass } from '@rsbuild/plugin-sass'
-const path = require('path')
-export default defineConfig({
-  plugins: [pluginVue(), pluginSass()],
-  html: {
-    template: './index.html'
-  },
-  // 设置mode
-
-  source: {
-    entry: {
-      index: './src/main.ts'
-    },
-    define: {
-      'process.env.VUE_APP_BASE_API': JSON.stringify(
-        process.env.VUE_APP_BASE_API
-      )
-    },
-    alias: {
-      '@': path.resolve(__dirname, 'src')
-    }
-  },
-
-  server: {
-    proxy: {
-      '/api': 'http://10.0.0.93:3000'
-    }
-  },
-
-  environments: {
-    web: {
-      source: {
-        define: {
-          'import.meta.env.SSR': JSON.stringify(false)
-        }
-      }
-    },
-    node: {
-      source: {
-        define: {
-          'import.meta.env.SSR': JSON.stringify(true)
-        }
-      },
-      output: {
-        target: 'node'
-      }
-    }
-  }
-})
--- 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
-// 判断开发环境（一般用于本地代理）
+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') {
-  // 开发环境
-  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'
+    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 res
+      })
+      return Promise.reject({
+        response: {
+          status: 200,
+          data: data,
+          message: JSON.stringify(data) || '请求失败'
+        }
+      })
+    }
+
+    // 如果是 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>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,51 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { fileURLToPath } from 'url'
+import { dirname, resolve } from 'path'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
+// ESM 中获取 __dirname 的替代方案
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()]
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()]
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+    open: true,
+    proxy: {
+      '/api': {
+        // 7566
+        // target: 'http://192.168.39.120:7566',
+        target: 'http://127.0.0.1:8066',
+        changeOrigin: true,
+        rewrite: (p) => p.replace(/^\/api/, ''),
+        bypass: (req, res, options) => {
+          // @ts-ignore
+          const proxyURL = options.target + options.rewrite(req.url)
+          // console.log('proxyURL', proxyURL)
+          req.headers['x-req-proxyURL'] = proxyURL // 设置未生效
+          // @ts-ignore
+          res.setHeader('x-req-proxyURL', proxyURL) // 设置响应头可以看到
+        }
+      }
+    }
+  }
+})