feat: upgrade vite4 (#533)

* chore: 升级vite4

* docs: 项目简介 修改

* fix: 打包后预览提示TypeError

* chore: @vitejs/plugin-vue,@vitejs/plugin-vue-jsx升级

* docs: 项目简介 修改

README-zh_CN.md

@@ -19,7 +19,7 @@
 
 ### 项目简介
 
-TDesign Vue Next Starter 是一个基于 TDesign，使用 `Vue3`、`Vite2`、`Pinia`、`TypeScript` 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。
+TDesign Vue Next Starter 是一个基于 TDesign，使用 `Vue3`、`Vite`、`Pinia`、`TypeScript` 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。
 
 <p>
   <a href="http://tdesign.tencent.com/starter/vue-next/">在线预览</a>

README.md

@@ -17,7 +17,7 @@
 English | [简体中文](./README-zh_CN.md) 
 ### Introduction
 
-TDesign Vue Next Starter is a TDesign-based developed with `Vue 3`, `Vite 3+`, `Pinia`, `TypeScript`. It can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects.
+TDesign Vue Next Starter is a TDesign-based developed with `Vue 3`, `Vite`, `Pinia`, `TypeScript`. It can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects.
 
 <p>
   <a href="http://tdesign.tencent.com/starter/vue-next/">Live Preview</a>

package.json

@@ -44,8 +44,8 @@
     "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "^5.47.1",
     "@typescript-eslint/parser": "^5.47.1",
-    "@vitejs/plugin-vue": "^3.2.0",
-    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vitejs/plugin-vue": "^4.2.3 ",
+    "@vitejs/plugin-vue-jsx": "^3.0.1 ",
     "@vue/compiler-sfc": "^3.2.47",
     "@vue/eslint-config-typescript": "^11.0.2",
     "commitizen": "^4.2.4",
@@ -70,7 +70,7 @@
     "stylelint-less": "1.0.6",
     "stylelint-order": "~6.0.1",
     "typescript": "~4.9.5",
-    "vite": "^3.2.5",
+    "vite": "^4.3.9",
     "vite-plugin-mock": "^2.9.6",
     "vite-svg-loader": "^4.0.0",
     "vue-tsc": "^1.2.0"

src/pages/dashboard/base/components/MiddleChart.vue

@@ -15,7 +15,6 @@
         </template>
         <div
           id="monitorContainer"
-          ref="monitorContainer"
           class="dashboard-chart-container"
           :style="{ width: '100%', height: `${resizeTime * 326}px` }"
         />
@@ -25,7 +24,6 @@
       <t-card title="销售渠道" :subtitle="currentMonth" class="dashboard-chart-card" :bordered="false">
         <div
           id="countContainer"
-          ref="countContainer"
           :style="{ width: `${resizeTime * 326}px`, height: `${resizeTime * 326}px`, margin: '0 auto' }"
           class="dashboard-chart-container"
         />

src/pages/dashboard/base/components/OutputOverview.vue

@@ -17,12 +17,7 @@
               @change="onStokeDataChange"
             />
           </template>
-          <div
-            id="stokeContainer"
-            ref="stokeContainer"
-            style="width: 100%; height: 351px"
-            class="dashboard-chart-container"
-          ></div>
+          <div id="stokeContainer" style="width: 100%; height: 351px" class="dashboard-chart-container"></div>
         </t-card>
       </t-col>
       <t-col :xs="12" :xl="3">