分包

src/main.js

@@ -1,11 +1,7 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+import App from "./App.vue";
+import router from "./router";
 
-// import ElementPlus from 'element-plus'
-// import 'element-plus/lib/theme-chalk/index.css'
-import router from './router'
+const app = createApp(App).use(router);
 
-const app = createApp(App).use(router)
-
-// app.use(ElementPlus)
-app.mount('#app')
+app.mount("#app");

src/router/index.js

@@ -1,11 +1,10 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import Program from "../views/Program.vue"
 
 const routes = [
   {
     path: '/',
     name: 'Program',
-    component: Program
+    component: () => import(/* webpackChunkName: "Program" */ '../views/Program.vue')
   },
   {
     path: '/Channel',
@@ -13,22 +12,22 @@ const routes = [
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/Channel.vue')
+    component: () => import(/* webpackChunkName: "Channel" */ '../views/Channel.vue')
   },
   {
     path: '/heightlight',
     name: 'Heightlight',
-    component: () => import(/* webpackChunkName: "about" */ '../views/Heightlight.vue')
+    component: () => import(/* webpackChunkName: "Heightlight" */ '../views/Heightlight.vue')
   },
   {
     path: '/realData',
     name: 'RealData',
-    component: () => import(/* webpackChunkName: "about" */ '../views/RealData.vue')
+    component: () => import(/* webpackChunkName: "RealData" */ '../views/RealData.vue')
   },
   {
     path: "/liveChannel",
     name: 'LiveChannel',
-    component: () => import(/* webpackChunkName: "about" */ '../views/LiveChannel.vue')
+    component: () => import(/* webpackChunkName: "LiveChannel" */ '../views/LiveChannel.vue')
   }
 ]
 

src/views/Heightlight.vue

@@ -28,7 +28,7 @@ import trendLineChart from "@/components/trendLineChart.vue";
 import { heightlightDataApi } from "@/api/index";
 
 export default {
-  name: "Program",
+  name: "Heightlight",
   data() {
     return {
       dataAll: {},

src/views/LiveChannel.vue

@@ -125,7 +125,7 @@ import {
 let Interval = undefined;
 let params = {};
 export default {
-  name: "Channel",
+  name: "LiveChannel",
   data() {
     return {
       tab: "2h",

src/views/RealData.vue

@@ -112,7 +112,7 @@ import bilateralBarChart from "@/components/bilateralBarChart";
 
 import config from "@/config/index";
 export default {
-  name: "Channel",
+  name: "RealData",
   data() {
     return {
       form: {

vue.config.js

@@ -1,14 +1,15 @@
-const Components = require('unplugin-vue-components/webpack')
-const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
+const Components = require("unplugin-vue-components/webpack");
+const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
+
 
 module.exports = {
   productionSourceMap: false,
-  publicPath:"./",
-  configureWebpack:{
+  publicPath: "./",
+  configureWebpack: {
     plugins: [
       Components({
         resolvers: [ElementPlusResolver()],
       }),
-    ]
-  }
+    ],
+  },
 };