fix: 打包页面空白问题

.env

@@ -1,5 +1,5 @@
 # 应用名称
-VITE_APP_TITLE="Vite 模板"
+VITE_APP_TITLE="车辆监控中心"
 
 # 平台本地运行端口号
 VITE_PORT=7000

.env.production

@@ -5,7 +5,7 @@ VITE_PORT=8800
 VITE_PUBLIC_PATH=/
 
 # 跨域代理地址
-VITE_APP_URL=http://localhost:8000
+VITE_APP_URL=http://localhost:8801
 
 # 如果端口被占用会直接退出，而不是尝试下一个端口
 VITE_STRICT_PORT=false

build/server.ts

@@ -5,7 +5,6 @@ import { wrapperEnv } from './utils';
 /* 开发服务配置 */
 export const server = (mode) => {
   const { VITE_PORT, VITE_APP_URL, VITE_STRICT_PORT } = wrapperEnv(mode);
-  console.log(VITE_STRICT_PORT);
   const options: ServerOptions = {
     strictPort: VITE_STRICT_PORT,
     port: VITE_PORT,

src/layout/components/AppMain/MainRight.vue

@@ -5,7 +5,7 @@ import { renderEcharts } from '@/layout/components/AppMain/data';
 
 const weekDataChart = ref<HTMLDivElement>();
 
-onMounted(async () => {
+onMounted(() => {
   renderEcharts(weekDataChart);
 });
 </script>

src/layout/components/AppMain/data.ts

@@ -1,9 +1,10 @@
 import 'echarts/lib/component/dataZoom';
 
 import type { EChartsOption } from 'echarts';
-import * as echarts from 'echarts';
 import { type Ref, ref } from 'vue';
 
+import echarts from '@/plugins/echarts';
+
 const option = ref<EChartsOption>({
   backgroundColor: 'transparent',
   grid: { right: 10, left: 10, bottom: 20 },
@@ -94,11 +95,8 @@ const option = ref<EChartsOption>({
 });
 
 export const renderEcharts = (element: Ref<HTMLDivElement>) => {
-  // 基于准备好的dom，初始化echarts实例
   const myChart = echarts.init(element.value, null, {
     renderer: 'svg',
   });
-
-  // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option.value);
 };

src/plugins/echarts.ts

@@ -0,0 +1,44 @@
+import { BarChart, LineChart, PieChart } from 'echarts/charts';
+import {
+  DataZoomComponent,
+  GraphicComponent,
+  GridComponent,
+  LegendComponent,
+  PolarComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
+import type { App } from 'vue';
+
+const { use } = echarts;
+
+use([
+  PieChart,
+  BarChart,
+  LineChart,
+  CanvasRenderer,
+  SVGRenderer,
+  GridComponent,
+  TitleComponent,
+  PolarComponent,
+  LegendComponent,
+  GraphicComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+]);
+
+/**
+ * @description 按需引入echarts，具体看 https://echarts.apache.org/handbook/zh/basics/import/#%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5
+ * @see 温馨提示：必须将 `$echarts` 添加到全局 `globalProperties` ，具体看 https://pure-admin-utils.netlify.app/hooks/useECharts/useECharts#%E4%BD%BF%E7%94%A8%E5%89%8D%E6%8F%90
+ */
+export function useEcharts(app: App) {
+  app.config.globalProperties.$echarts = echarts;
+}
+
+export default echarts;

src/plugins/index.ts

@@ -1,6 +1,7 @@
 import type { App } from 'vue';
 
 import { setupDirective } from '@/directive';
+import { useEcharts } from '@/plugins/echarts';
 import { setUpRouter } from '@/router';
 import { setupStore } from '@/store';
 
@@ -12,5 +13,7 @@ export default {
     setupStore(app);
     // 设置指令
     setupDirective(app);
+    // 按需引入echarts
+    useEcharts(app);
   },
 };