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

解决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 {
    
    }