vite+vue3.0打包之后线上的echarts不能正常展示

Question

在第一次点击长丰运维站（1图）展示了图表（2图）之后，再点击返回到长丰运维站页面（1图）。


再次点击长丰运维站（1图）图表无法正常渲染出来

还有我用vite打包之前地址是没有index的，到线上的时候地址多了个index，这会有影响吗？
打包前：

打包后：

饼图：

<template>
  <div class="map">
     <div id="pie" style="width: 90%;">
     </div>
  </div>
</template>

<script lang="ts">
import * as echarts from 'echarts';
import {onMounted} from 'vue';
export default {
  props: {
    chartData: {
      type: Array
    }
  },
  setup(props) {
    const echartInit = () =>{
           var myChart = echarts.init(document.getElementById('pie') as HTMLElement);
        window.addEventListener('resize', ()=> {
            myChart.resize()
        })
        // 指定图表的配置项和数据
        var option = {
            title: {
              left: 'center',
          },
          tooltip: {
              trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center',
            itemStyle: {
              // color: 'white'

            },
            textStyle: {
              color: 'white'
            }
          },
          series: [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius: '60%',
                  center: ['50%', '55%'],
                  data: props.chartData,
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
    onMounted(()=>{
      echartInit()
    })
    return { 
      echartInit
    };
  }
  
}
</script>

<style lang='scss' scoped>
.map {
  display: flex;
  justify-content: center;
  align-items: center;
  #pie {
    height: vh(400);
  }
}
</style>

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import' // 按需加载element-plus
const { resolve } = require('path') // 为vite创建别名

export default defineConfig({
    /**
     * 在生产中服务时的基本公共路径。
     * @default '/'
     */
    base: "./", // 设置打包路径
    /**
     * 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。
     * @default 'dist'
     */
    // 打包相关规则
    build: {
      sourcemap: false,  //是否构建source map 文件
      outDir: "dist", //指定打包输出路径
      assetsDir: "assets", //指定静态资源存放路径
      cssCodeSplit: true, //css代码拆分,禁用则所有样式保存在一个css里面
      rollupOptions: {
          output: {
            manualChunks: {
              'element-plus': ['element-plus'],
              echarts: ['echarts']
            }
          }
      },
      chunkSizeWarningLimit: 600,
    },

    server: {
      port: parseInt(process.env.APP_PORT || '5000'), // 设置服务启动端口号
      // hot: true,
      open: true, // 设置服务启动时是否自动打开浏览器


      https: false,
      proxy: {        
        '^//.*': {
          target: 'http://192.168.1.170:8889',
          // target: 'http://192.168.2.223:8889',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\//, '')
        }
      }, 
    },

    plugins: [vue(),
      styleImport({
        libs: [{
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {
            name = name.slice(3)
            return `element-plus/packages/theme-chalk/src/${name}.scss`;
          },
          resolveComponent: (name) => {
            return `element-plus/lib/${name}`;
          },
        }]
      })
    ],
    // 引入第三方的配置
    optimizeDeps: {
      include: ["element-plus/lib/locale/lang/zh-cn", "axios"],
    },
    resolve:{ 
      alias: {
        '@': resolve(__dirname, 'src'), 
        '~@': resolve(__dirname, 'src/assets/images'), 
      }, 
    },
    // css预设配置
    css: {
      preprocessorOptions: {
        // less: {
        //   modifyVars: {    
        //   },
        // includePaths: ['path/to/sass/deps'],
        //   javascriptEnabled: true
        // },
        sass: {
          javascriptEnabled: true
        },
        scss: {
          additionalData: `@import "./src/assets/css/global.scss";`
        }

      }
    },
})

Answer 1

nextTick，watchEffect，v-if， echarts 销毁；四个全加上放到线上就管用了，不知道具体哪个，随缘吧。