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" />
+    <meta
-    <title>Vite App</title>
+      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",
+    "dev": "vite",
-    "build:dev": "rsbuild build --env-mode dev",
+    "build": "vite build",
-    "build:test": "rsbuild build --env-mode test",
+    "preview": "vite preview"
    "build:prod": "rsbuild build --env-mode prod",
    "preview": "rsbuild preview"
  },
  "dependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
+    "axios": "^1.10.0",
    "axios": "^1.8.3",
    "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",
+    "tdesign-vue-next": "^1.15.1",
-    "vue-router": "^4.5.0",
+    "vue": "^3.5.18",
-    "xlsx": "^0.18.5"
+    "vue-router": "^4.5.1"
  },
  "devDependencies": {
-    "@rsbuild/core": "^1.2.19",
+    "@types/node": "^24.0.3",
-    "@rsbuild/plugin-sass": "^1.2.2",
+    "@vitejs/plugin-vue": "^6.0.0",
-    "@rsbuild/plugin-vue": "^1.0.7",
+    "sass": "^1.89.2",
-    "@types/node": "^22.13.10",
+    "typescript": "^5.1.6",
-    "sass": "^1.86.0",
+    "unplugin-auto-import": "^19.3.0",
-    "typescript": "^5.8.2",
+    "unplugin-vue-components": "^28.7.0",
-    "unplugin-auto-import": "^19.1.1",
+    "vite": "^7.0.5",
-    "unplugin-vue-components": "^28.4.1",
+    "vue-tsc": "^3.0.3"
    "vue-tsc": "^2.2.8"
  }
-}
+}
--- 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 @@
-/*
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
- * @Description: {{ByRuin}}
+import { DialogPlugin } from 'tdesign-vue-next'
- * @Version: 2.0
+// 获取浏览器中的url地址和端口号并拼接
- * @Author: Ruin 🍭
+/* import { config } from 'public/config.js'
- * @Date: 2022-01-25 17:48:13
+const getBaseUrl = () => {
- * @LastEditors: 刘引
+  let baseUrlData = ''
- * @LastEditTime: 2022-01-25 17:52:39
+  if (process.env.NODE_ENV === 'development') {
- */
+    baseUrlData = config.baseUrl
-/* 1.引入文件 */
+  } else if (process.env.NODE_ENV === 'production') {
-import axios from 'axios' //引入 axios库
+    baseUrlData = 'http://10.0.0.88:3000/api'
-// @ts-ignore
+  }
-import qs from 'qs' //引入 node中自带的qs模块（数据格式转换）
+  return baseUrlData
-/* 2.全局默认配置 */
+} */
-let baseURL
+// 创建一个新的axios实例
-let process: any
+const instance: AxiosInstance = axios.create({
-// 判断开发环境（一般用于本地代理）
+  baseURL: import.meta.env.VITE_BASE_API,
-if (process.env.NODE_ENV === 'development') {
+  timeout: 60000,
-  // 开发环境
+  withCredentials: false,
-  baseURL = 'http://www.liulongbin.top:3006' // 你设置的本地代理请求（跨域代理），下文会详细介绍怎么进行跨域代理
+  headers: {
-} else {
+    'Content-Type': 'application/json'
  // 编译环境
  if (process.env.type === 'test') {
    // 测试环境
    baseURL = 'http://www.liulongbin.top:3006'
  } else {
    // 正式环境
    baseURL = 'http://www.liulongbin.top:3006'
  }
 }
 // 配置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
+// 请求拦截器
-时定义的变量*/
+instance.interceptors.request.use(
-Axios.interceptors.request.use(
+  (config: any) => {
-  (config) => {
+    // 在发送请求之前做些什么
-    //发送请求前进行拦截
+    // 例如，添加token到请求头
-    //  可在此处配置请求头信息
+    // const token = localStorage.getItem('token');
-    // config.headers["appkey"] = "...";
+    // if (token) {
-    // config.headers["token"] = "...";
+    //   config.headers.Authorization = `Bearer ${token}`;
-    if (config.method == 'post') {
+    // }
      /*数据转换: axios post方式默认是json格式提交数据，如果使用application/x-www-form-urlencoded数据格式提交，要用qs.stringify()进行转换,个人建议不在拦截器中全局配置，因为不够灵活，还有一点是，如果
 设置了重新请求的配置，那么重新请求时，请求体中的config里面的传参就会被再次进行qs.stringify()转
 换，会使得参数丢失，造成请求失败。*/
      config.data = qs.stringify(config.data)
    }
    return config
  },
-  (error) => {
+  (error: any) => {
-    //console.log("错误的传参", 'fail');
+    // 对请求错误做些什么
    return Promise.reject(error)
  }
 )
-Axios.interceptors.response.use(
+
-  (res) => {
+// 响应拦截器
-    //请求响应后拦截
+instance.interceptors.response.use(
-    if (res.status == 200) {
+  (response: AxiosResponse) => {
-      // 对响应数据做些事
+    // 对响应数据做点什么
-      //alert("提交成功")
+    console.log(process.env.NODE_ENV, '变量')
-      return Promise.resolve(res)
+
    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) => {
+  (error: any) => {
-    //alert("网络异常!") 404等问题可以在这里处理
+    // 对响应错误做点什么
    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 TDesign from 'tdesign-vue-next'
-import ElementPlus from 'element-plus'
+import 'tdesign-vue-next/es/style/index.css'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import 'element-plus/dist/index.css'
 import 'normalize.css/normalize.css'
 // 挂载到app上
 createApp(App)
  .use(router)
  .use(createPinia())
-  .use(ElementPlus, {
+  .use(TDesign)
-    locale: zhCn
+
  })
  .component('Foot', Foot)
  .component('Head', Head)
  .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'),
+    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')
  }
 ]
@@ -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'
+import { useStore } from '@/store'
-const store = useMain()
+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) // 设置响应头可以看到
        }
      }
    }
  }
 })
`@@ -1,6 +1,6 @@`

	`# base api`	`# base api`
	`VUE_APP_BASE_API = 'http://127.0.0.1:3000/api'`	`VITE_BASE_API = '/api'`
`@@ -1,4 +1,4 @@`

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