解决keep-alive在生产环境下失效的问题

Posted 2023-03-08 勇敢*牛牛

解决keep-alive在生产环境下失效的问题

首先：
正常的某一种用法是：

 <keep-alive include="HomeView">
      <router-view/>
 </keep-alive>

有vue+ts的组件：

<template>
  <div class="home">
  </div>
</template>

<script lang="ts">
import  Component, Vue ,Watch from 'vue-property-decorator';
@Component(
  name:"HomeView",//必须加上之后才会显现
  components: 
  ,
)
export default class HomeView extends Vue 
  mounted()
    console.log('挂载');
  
  activated()
    console.log('激活');
  
  

</script>

<style lang="less" scoped>
</style>

表示，包含组件名为HomeView时进行缓存，不销毁组件实例，

原因：

因为在本地开发执行时，会自动把类名作为组件的name值，但是build时。类名会被忽略掉，因此就得需要加上name属性。

解决方法：

@Component(
  name:"HomeView",//必须加上之后才会显现
  components: 
  ,
)
export default class HomeView extends Vue